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);

正如你在这个小提琴中看到的那样：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/

中查看此示例

实现此目的的另一种方法是使用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)"});

那个小提琴就在这里：http://jsfiddle.net/mifi79/c66Fb/2/

另一个选项（从兼容性的角度来看可能是更好的选择）是使用jQuery的.animate（）方法，它适用于不支持CSS转换的浏览器（IE之前的IE）

css转换初始值

1 个答案: