Question

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

Using animations我可以为opacity制作动画，但只有fadeIn，而height（应控制幻灯片）似乎根本不起作用：（

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

还有其他想法吗？

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

fiddle here

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

Answer 1

当其中一个高度为自动时，您无法在高度上设置动画，您必须设置两个明确的高度。发布了一个广泛的解决方法作为此similar question.

的答案

Answer 2

我改变了你的JS小提琴，我相信这就是你想要的; please see it here.

你需要在div上指定一个高度（0）并且不要忘记overflow：hidden;这样内容就不会“扯掉”div。你仍然需要jQuery / Javascript来切换一个类，但它意味着更少的Javascript是必需的。（我切换了你将在那个小提琴上看到的“改变”一类）

input {
   display:none;
}
label {
    display:inline-block;
}
div {
    white-space: pre;
    background: #eee;
    color: #333;
    overflow:hidden;
    height:0;
    opacity:0;
    -moz-transition:height 1s opacity 1s;
    -webkit-transition:height 1s opacity 1s;
    -o-transition:height 1s opacity 1s;
    -ms-transition:height 1s opacity 1s;
    transition:height 1s, opacity 1s;
}
.changed {
    height:200px;
    opacity: 1;
}

我在转换CSS中添加了一些供应商前缀，因为我不确定你将使用什么浏览器而且我在使用Firefox，所以我需要-moz-前缀lol：）

我能看到的唯一问题是高度：自动或高度：100％没有动画，所以你需要指定ems或px ...如果这将是一个问题（如果内容将是动态的），我建议使用jQuery作为高度动画。

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

2 个答案: