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

Posted 2023-03-06

【中文标题】使用 CSS 过渡的滑动 + 淡入淡出效果

【英文标题】：Slide + fade effect using CSS transitions

【发布时间】：2013-01-29 03:13:48

【问题描述】：

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

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

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

还有其他想法吗？

---

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

fiddle here

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

【参考方案1】：

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

【参考方案2】：

我对你的 JS Fiddle 做了修改，我相信这就是你想要的； 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- 前缀，哈哈 :)

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

【讨论】：

我可以确认这确实有效，你看过 JSFiddle 吗？还有你用的是什么浏览器？