css 过渡初始值

Question

我想为一个 div 从右到左设置动画。

我无法使用样式表，因为我不知道 px 的数量。

如果我在同一个函数中设置初始值(动画开始的地方)和结束值，它就不起作用。

//DOES NOT WORK
$("#hi").css({"width" : "200px", "transform" : "translateX(500px)"});
$("#hi").css({"transition" : "all 5s ease-out", "transform" : "translateX(0px)"});

//WORKS
$("#alsohi").css({"width" : "200px", "transform" : "translateX(500px)"});
setTimeout(function(){
    $("#alsohi").css({"transition" : "all 5s ease-out", "transform" : "translateX(0px)"});
}, 50);

正如您在这个 fiddle 中看到的那样:http://jsfiddle.net/c66Fb/

有什么比使用超时更好的解决方案？

Answer 1

这是因为两个 $("#hi") css 更改是同时执行的，使第一个示例工作的简单方法是检查您在第一个语句中设置的 CSS 属性是否实际设置:

$("#hi").css({"width" : "200px", "transform" : "translateX(500px)"});

if ($("#hi").css("width") === "200px") {
    $("#hi").css({"transition" : "all 5s ease-out", "transform" : "translateX(0px)"});
}

您可以在以下位置查看此工作的示例:http://jsfiddle.net/mifi79/c66Fb/1/

完成此操作的另一种 hacky 方法是使用 while 循环进行检查:

$("#hi").css({"width" : "200px", "transform" : "translateX(500px)"});
while ($("#hi").css("width") !== "200px") { return false; }
$("#hi").css({"transition" : "all 5s ease-out", "transform" : "translateX(0px)"});

那个 fiddle 在这里:http://jsfiddle.net/mifi79/c66Fb/2/

另一种选择(从兼容性的 Angular 来看可能是更好的选择)是使用 jQuery 的 .animate() 方法，它适用于不支持 CSS 转换的浏览器(IE 9 之前的版本)