CSS动画-setTimeout不应用会中断动画的更改

Question

这是我的目标的描述：

1. 我有display: none框display: none
2. 有时我需要用opacity动画显示它。

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

问题在于，第一步仅在某些情况下适用-有时可行/有时不可行，并且浏览器仅跳过第一步。 我认为将setTimeout更改为requestAnimationFrame应该可以解决问题，但不能解决问题- 检查我的示例

为什么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; 在您可以添加下一个课程之前。 这意味着该对象将从视图中卸载。 同时，当您进行is-animate-active您会立即设置display:block和opacity:1 。 就浏览器而言，您正在创建一个新元素，而不是在此处修改旧元素。 如前所述，在切换display您实际上是在loading和unloading对象，因此无法进行动画处理。

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