我已经尝试了从添加额外的关键帧(0%、1%、100% 或 0%、99%、100%)到设置 -webkit-animation-fill-mode 以转发到经常提到的 -webkit-backface-可见性:隐藏;在其他线程中提到的技巧,但在 Safari 7(桌面和 iOS)中几乎每个动画迭代开始时,我仍然看到我的 css 关键帧动画闪烁。Chrome 似乎没有闪烁。
JSBin:http : //jsbin.com/julor/2/edit
HTML:
<div class="ripple"></div>
Run Code Online (Sandbox Code Playgroud)
CSS:
body {
background-color: #90CBEA;
}
.ripple, .ripple:before, .ripple:after {
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .15) 100%);
border-radius: 50%;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
.ripple:before, .ripple:after {
content: '';
display: block;
}
.ripple {
-webkit-animation-name: innerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
&:before {
-webkit-animation-name: ripple;
-webkit-animation-duration: 3s; …Run Code Online (Sandbox Code Playgroud) 在不断变化的Ember.js世界中,我正在寻找一些有关简单应用程序启动和运行的帮助.
我试图通过一个带Ember.js的API通过JSON加载数据来获得一些基本框架,但是无法获取数据.代码可以在这里找到:
var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.Movie = Ember.Object.extend({
title: null,
rating: null,
release_date: null,
poster_image: null
});
App.MoviesView = Ember.View.extend({
templateName: 'movie-list'
});
App.moviesController = Ember.ArrayController.create({
content: [],
init: function(){
var me = this;
$.getJSON('/trailers/api/movies',function(data){
me.set('content', []);
$(data.movies).each(function(index,value){
var t = App.Movie.create({
title: value.title,
rating: value.rating,
release_date: value.release_date,
poster_image: value.poster_image
});
me.pushObject(t);
})
});
}
});
App.router = Ember.Router.create({
enableLogging: true,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
redirectsTo: 'movies'
}), …Run Code Online (Sandbox Code Playgroud)