如何使用转换将元素位置从x1转换为x2
How to translate element position from x1 to x2 using transitions?
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中将字符串转换为函数引用
- 如何在Javascript中将JSon对象转换为数组
- 使用JS将数组转换为json对象
- 如何使用json将对象列表从java转换为javascript
- 偶尔结结巴巴地说“;堆叠的”;translate()上的转换(v4.0.0-alpha40)
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 在Javascript中转换对象数组
- 将数字转换为一定数量的硬币
- 将纯文本URL转换为可单击链接
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 如何使用js将SNAPSHOT内部版本号转换为3位数的整数
- 如何将TypeScript对象转换为普通对象
- 检测个位数整数时正在转换毫秒
- 从javascript到jquery的转换
- DOM事件通过JSON转换为java
- 将圆柱体转换为弯管
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- JavaScript代码问题:我正在将对象转换为数组
- 如何将字母转换为二进制代码
- 如何使用转换将元素位置从x1转换为x2