使用 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 立即跳转到 100 像素，然后过渡（超过 400 毫秒）到 200 像素
2. 稍后，将 div 跳转到 500px（没有过渡），然后将其过渡到 600px

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

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

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

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

使用所有供应商前缀，这太混乱和复杂，不是实现此目的的最佳方式。 （我什至不确定它是否有效......）

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

[更新]

感谢 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 属性，例如 display。您可以读取任何其他计算属性来获得相同的效果。