javascript - 使用 JavaScript 打开和关闭 CSS 转换

Question

全部，

我遇到过这样一种情况，我正在使用 CSS 转换/过渡来为 div 元素的水平位置设置动画。具体来说，我正在使用...

// in CSS
myDiv {
    transition: transform 0.4s ease-in;
}

// in JavaScript, where "div" contains a reference to the div element
div.style.transform = translate3d(Npx, 0px, 0px);

...而且效果很好。也就是说，每次我用 N 的新值调用该行 JavaScript 时，div 都会从它的当前位置平滑地动画到它的新位置。

但是，有时我需要先定位 div 而不使用过渡，然后再使用过渡移动它。例如，

1. 让 div JUMP(立即)到 100px，然后过渡(超过 400ms)到 200px
2. 稍后，将 div 跳转到 500px(没有过渡)，然后将其过渡到 600px

换句话说，我希望能够移动一个 div，并且能够控制是立即应用新位置，还是通过转换应用新位置。

使事情复杂化的是，我有在转换完成时触发的事件监听器；如果/当我在没有过渡的情况下移动 div 时，这些听众不应该触发。我还支持多种浏览器，因此我必须处理所有 vendor 前缀。

在伪代码中，我猜它看起来像这样:

1. 移除 transitionEnd 事件的事件监听器
2. 将过渡属性设置为none
3. 更改 div 的位置(例如，[div].style.transform = translate3d([starting position]px, 0px, 0px))
4. 为 transitionEnd 事件添加事件监听器
5. 设置过渡属性以进行过渡(例如，[div].style.transition:all 0.4s ease-in)
6. 更改 div 的位置(例如，[div].style.transform = translate3d([ending position]px, 0px, 0px))

对于所有 vendor 前缀，这太困惑和复杂了，不是完成此任务的最佳方法。 (我什至不确定它是否有效...)

那么，打开和关闭过渡/转换的最佳方式是什么？

[更新]

感谢 Chandranshu 的建议，我尝试切换一个包含转换的类。

所以，我的伪代码如下所示:

1. 删除过渡类
2. 申请起始位置
3. 恢复过渡类
4. 应用结束位置

但是，如果我在单个 JavaScript 函数中执行所有四个步骤，它似乎会忽略第 1-2 步，就好像它在“计算”所有四个步骤的结果。

这是一个演示这一点的 jsfiddle:http://jsfiddle.net/bUvX3/

相反 - 如果我执行第 1 步和第 2 步，然后在短暂延迟后执行第 3 步和第 4 步(例如，通过使用 setTimeout)，它会起作用:http://jsfiddle.net/2mhcv/

所以，我想这是一个解决方案，除了我真的不喜欢添加任意延迟，尤其是当如此强调快速响应的 UI 时。

提前致谢!

Answer 1

我认为你把这个复杂化了 :)。以下是我如何解决这个问题:

1. 向您的 div 添加一个类，比如 movable。
2. 为 .movable 声明所有转换规则和 transitionEnd 回调。
3. 如果您想顺利移动您的 div，则无需执行任何操作。
4. 当您需要移动没有过渡的 div 时，删除此类，移动您的 div 并添加此类:$('div').removeClass('movable').animate({transform: 'translate3d(...)' }).addClass('movable')

更新:

终于，我得到了你想要的:http://jsfiddle.net/2mhcv/1/ .这里唯一的变化是，我使用的是 0 延迟，而不是 20 毫秒的延迟! setTimeout() 触发重绘，确保第一个动画在下一个动画开始之前执行。

更新 2:

此版本无需 setTimeout() 调用即可工作:http://jsfiddle.net/2mhcv/2/ .意识到只需要重绘，我只是在那里添加了一行来读取计算 CSS 属性，例如显示。您可以阅读任何其他计算属性来获得相同的效果。