javascript - 使用 CSS 过渡的滑动 + 淡入淡出效果

Question

我正在尝试复制 this effect使用 CSS 效果或过渡。

Using animations我可以为 opacity 设置动画，但只有 fadeIn，而 height(应该控制幻灯片)似乎根本不起作用:(

我得到的最接近的是 using javascript在我想要设置动画的元素上设置一个临时类，并在其上应用初始不透明度。但是 height 也不起作用。并且动画开始似乎有轻微的延迟。

还有其他想法吗？

---

所以我最终使用了 Simon 提到的问题中发布的解决方案:使用 javascript，我将要设置动画的元素包装在应用动画的“包装器”DIV 中。每次单击标签时，包装器的高度都会从 0 变为内容 DIV 的高度:

fiddle here

我知道它需要一些 javascript，但我的想法是用 CSS 制作动画，这就是它所做的。如果 JS 被禁用，切换仍然有效......

Answer 1

当所涉及的高度之一为自动时，您目前无法在高度上设置动画，您必须设置两个明确的高度。已发布一个广泛的解决方法作为此 similar question. 的答案