如何在没有关键帧的情况下在我的 css 中链接多个 -webkit-transition 动画答案

【问题标题】：How to chain multiple -webkit-transition animations in my css without keyframes如何在没有关键帧的情况下在我的 css 中链接多个 -webkit-transition 动画
【发布时间】：2013-03-23 01:06:29
【问题描述】：

我正在尝试在没有关键帧的情况下在我的 css 中链接多个 -webkit-transition 动画。

我知道如果我调用一个关键帧动画是可能的，但我只是想覆盖属性并且这个 JS 中的某些东西不起作用：

var firstTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 1 }
var secondTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 0 }

$('theDiv').setStyles(firstTransition)

changeColor.delay(3000);

function changeColor(){

    $('theDiv').setStyles(secondTransition);
}

这是小提琴： http://jsfiddle.net/a2co/Tn9mT/25/

【问题讨论】：

在你的小提琴中，元素也获得了可见性：隐藏。我认为 jQuery 试图变得聪明。将 0 更改为 0.01。
@Gerben 你是对的，如果你提供它作为答案，我会接受它！ :)

标签： animation css webkit css-animations

【解决方案1】：

在你的小提琴中，元素也获得了可见性：隐藏。我认为 jQuery 试图变得聪明。将 0 更改为 0.01。

【讨论】：

【解决方案2】：

另一种可能更简洁的方法是使用诸如 jQuery Transit 之类的框架，它可以轻松处理与 CSS3 相关的链和回调：

Javascript：

    $('#theDiv').transition({opacity: 1}, 1000, 'in', function () { 
         //Callback
         $(this).transition({opacity: 0, delay: 3000}); });

JS Fiddle Demo

【讨论】：