我正在尝试构建一个非常简单的滑块.我想为动画和js使用CSS3过渡来将animate-in和animate-out类按顺序应用于各个帧.
我在这里写了一个关于jsfiddle的基本预期功能的工作演示:http://jsfiddle.net/7myKg/3/
这很简单.通过应用动画类来动画帧,并通过应用动画类来动画化.例如,这将显示第二帧:
<div class="slider" id="slider">
<ul>
<li id="frame1" class="animate-out"><p>one</p></li>
<li id="frame2" class="animate-in"><p>two</p></li>
<li id="frame3"><p>three</p></li>
</ul>
</div>?
在我可以动画帧之前,我需要确保它被重置并且帧必须不转换到它的重置状态.为了达到这个目的,我在帧中添加了内联样式,将其转换持续时间设置为0,然后再删除它的动画类.目前,这可以在Chrome中使用.我遇到的问题是Firefox似乎在DOM反映了元素样式的变化之前应用了animate-in类,这导致元素/帧向后过渡.通过在Firefox中运行演示而不是解释更容易看到.我添加了一个带延迟的setTimeout包装来演示我期望它的行为方式.
我错过了什么？为什么Firefox不会立即更新DOM元素？
我从头开始构建这个作为学习经验,因为我认为这是一个奇怪的问题,我能够解决.它不是用于生产,至少当然不是为了生产.出于这个原因,我不想使用众多现有解决方案或插件中的一个.
注意:这是我的第一个问题所以任何建设性的提示,如果我在将来如何提出更好的问题方面做错了,我将不胜感激.
谢谢.