Question

我正在设置一个淡入淡出的html块（不透明度）并从左侧略微移动（margin-left）......

$('.latest-stats').delay(1000).animate({ opacity: 1, marginLeft: '55px' }, 1000, function () {
  ...code in here
}

.latest-stats {
   position:absolute;
   top:250px;
   opacity:0;
   margin-left:40px;
}

有一个延迟，我需要在transiiton完成后在该HTML块中执行一些功能。这可以在css中完成，可能是通过添加一个具有转换的类吗？

Answer 1

添加的CSS类：

.transitioned {
   opacity:1;
   margin-left:55px;
   transition:all 1s;
   -ms-transition:all 1s;
   -moz-transition:all 1s;
   -o-transition:all 1s;
   -webkit-transition:all 1s;
}

jQuery： （更新）

setTimeout(function(){
    $('.latest-stats').addClass('transitioned');
    setTimeout(function(){
        //your code here
    },1000);
},1000);

但我只想问，你有没有特别的理由这样做？我的意思是jQuery animate有什么问题？

Answer 2

我们重新调整JS只是添加类而不是任何样式：

setTimeout(function(){
    $('.latest-stats').toggleClass('transitioned').each(function () {
        // Call back functions here
    });
}, 1000);

我使用setTimeout()，因为delay()仅适用于动画。我使用each()添加我的回调函数，因为toggleClass()没有回调函数，这样我就不需要加载额外的库了。

然后CSS处理样式的更改，将所有可视方面保存在一个位置：

.latest-stats { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; position:absolute; opacity:0; margin-left:40px; padding: 30px; background:red; margin:40px; } .latest-stats.transitioned { opacity:1; -webkit-transform:translate(55px, 0); -moz-transform:translate(55px, 0); transform:translate(55px, 0); } 请注意，我正在使用translate来移动元素而不是margin-left作为the browser doesn't have to change the layout or perform a repaint on the element, which can improve the animation。但是，检查浏览器支持并在必要/适当时提供回退。

Here's a JSFiddle.

使用css3过渡而不是jQuery动画

2 个答案: