javascript - Css 动画 - setTimeout 不应用会破坏动画的更改

Question

这是我的目标描述:

1. 我有一个带有 display: none
的盒子
2. 有时我需要用opacity 动画显示它。

这是我的解决方案:
1. transition: opacity 0.5s ease-in-out;
2. 第一步设置display: block;不透明度:0
3. 在第二步设置 display: block;不透明度:1，在 setTimeout() 中执行以应用第一步。

问题是第一步只适用于某些情况——有时有效/有时无效，浏览器只是跳过第一步。我认为将 setTimeout 更改为 requestAnimationFrame 应该可以解决问题，但事实并非如此 - check my example

为什么 setTimeout/requestAnimationFrame 不强制浏览器应用第一步？如何强制浏览器在应用第二步之前应用第一步？

Answer 1

解决方案:http://jsfiddle.net/sxny7zs2/

.box{display:none} 应该是 .box{display: block;}

当您设置 display:none 时，您几乎完全从 DOM 中删除了该对象。通过重置为 display:block，您可以完全恢复对象并开始与其他对象交互。 display 功能不适用于动画，而是用于移除对象以免干扰其他对象。

我怀疑这是恶棍:

$box.removeClass('is-animate-enter').addClass('is-animate-active');

通过删除 is-animate-enter 类，您可以在添加下一个类之前触发 display:none;。这意味着该对象已从 View 中卸载。同时，当您执行 is-animate-active 时，您会立即设置 display:block 和 opacity:1。就浏览器而言，您正在创建一个新元素，而不是在这里修改旧元素。如前所述，当切换显示时，您实际上是在加载和卸载一个对象，因此不可能有动画。

也许 .switchClass() 可以解决这个问题，但我不确定，重申 display 命令用于 loading 和 正在卸载，而不是用于动画。