移除类后的 CSS 动画答案

【问题标题】：CSS animation out after removal of class移除类后的 CSS 动画
【发布时间】：2012-06-15 08:51:32
【问题描述】：

我有一个具有淡入淡出过渡的滑块。它基本上循环和切换我的<li></li> 元素并将.current 类添加到活动幻灯片。看起来像这样<li class="current"></li>。

您认为我的代码的解决方案是什么？ http://jsbin.com/evayaw/

我刚刚添加了一个按钮以在幻灯片上添加一个类 (.active) 以模仿我的滑块行为。在父 <li> 容器上添加 .active 类时，每张幻灯片内的对象都会动画。它也应该在删除 .active 类后转换出来。转换通常会执行相反的属性，例如。从opacity: 1; 它将转到opacity 0; 或从left: 100; 到left: 0;。

类似： http://tympanus.net/Development/ParallaxContentSlider/ - 这与我现有的滑块使用不同的方法，所以我不能使用它。

【问题讨论】：

标签： jquery css

【解决方案1】：

http://jsbin.com/evayaw/35

如果您单击 2，然后单击 3，然后单击 2，这就是您想要的吗？部分问题是当您删除 .active 时，它将不再具有 z-index:9999;。我添加了一个.unActive（其中也有z-index:9998;，还添加了一个`.delay'。

另外，使用 href 标记您一直转到页面顶部，我删除了它们。（我想我可以让他们停止默认行为，但我将a 属性放入li，并且还给li 一个鼠标指针属性。我也让你的点击使用nth_of_type（），但你可以删除它，只是帮助我确保您的按钮没有问题。

编辑：此外，当您希望动画“反转”而不是 .object_# 时，您可以输入 .unActive .object_#

【讨论】：