HTML:
<div id="foo"></div>
CSS:
#foo { width: 100px; height: 100px; background: #f00; }
.a { -webkit-transition: -webkit-transform 1s linear; -webkit-transform: translateY(100px); }
.b { -webkit-transition: -webkit-transform 1s linear; -webkit-transform: translateY(50px); }
JavaScript:
$(function () {
var elm = $('#foo');
var animate = function (className, callback) {
elm.addClass(className);
setTimeout(function () {
elm.removeClass(className)
callback();
}, 1000);
};
animate('a', function () {
animate('b');
});
});
问题:
在第二次迭代期间,元素实际上是从先前的翻译 Y 移动的,而不是翻译较少的元素状态。
使用关键帧会奏效,尽管这需要添加更多预定义的 CSS 类,这并不是一个真正的选择。
最佳答案
我想出的可能解决方案是使用 setTimeout
。
$(function () {
var elm = $('#foo');
var animate = function (className, callback) {
setTimeout(function () {
elm.addClass(className);
}, 0);
setTimeout(function () {
elm.removeClass(className)
callback();
}, 1000);
};
animate('a', function () {
animate('b');
});
});
可以在http://jsfiddle.net/CP8An/ 看到两者的关系。和 http://jsfiddle.net/CP8An/1/ .后者是期望的结果。
我不明白为什么需要 setTimeout
- 毕竟,在调用回调之前删除了先前定义的类。使用 setTimeout
似乎更像是一种变通方法而不是解决方案。这可能对正在处理类似问题的人有所帮助,尽管我仍然愿意接受其他建议。
关于javascript - 如何使用转换将元素位置从 x1 转换为 x2?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14924322/