1

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

使用动画，我可以为 设置动画opacity，但只能为 fadeIn 设置动画，并且height（应该控制幻灯片）似乎根本不起作用 :(

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

还有其他想法吗？

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

在这里摆弄

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

4

2 回答 2

1

当涉及的高度之一是自动时，您当前无法在高度上设置动画，您必须设置两个明确的高度。发布了一个广泛的解决方法作为对这个类似问题的回答。

于 2013-02-13T15:30:58.427 回答
0

我对您的 JS Fiddle 进行了修改，我相信这就是您想要的；请在这里查看。

您最初需要在 div 上指定一个高度（0）并且不要忘记溢出：隐藏；这样内容就不会从 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- 前缀哈哈：）

我能看到的唯一问题是 height:auto 或 height:100% 没有动画，所以你需要指定 ems 或 px ......如果这将是一个问题（比如内容是否会是动态的），我建议使用 jQuery 来制作高度动画。

于 2013-02-13T15:27:46.203 回答