小编Mat*_*t M的帖子

如何防止 Safari css 关键帧动画闪烁?

我已经尝试了从添加额外的关键帧(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)

css safari css-animations

4
推荐指数
1
解决办法
2056
查看次数

基本的Ember.js路由和数据加载

在不断变化的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)

ember.js ember-old-router

3
推荐指数
1
解决办法
2095
查看次数

标签 统计

css ×1

css-animations ×1

ember-old-router ×1

ember.js ×1

safari ×1