css转换初始值

我想从右到左设置一个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);

正如你在这把小提琴中看到的：

---

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

这是因为两个$（“#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)"});
}

您可以在以下位置看到这方面的示例：

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

这把小提琴的小提琴在这里：

---

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

太棒了，谢谢！css属性的检查是否应用第一个属性？这就像“刷新”属性吗？不，检查只是强迫它等待执行第二个，有点像使用setTimeout，除了不是猜测等待的毫秒数，而是诱使它等待一毫秒左右。在本例中，您几乎使用了.css方法，如.animate，但它并不是专门设计来实现的（但我理解您为什么要这样做），因此上面的黑客解决方案是：）@nizzle我编辑了我的响应，以显示另一个也可以实现的选项。但是，出于兼容性的考虑，我仍然建议使用.animate方法，除非IE的早期版本不是问题。