移除 style="display:none;" 时的 CSS 高度过渡

Posted 2023-02-22

【中文标题】移除 style="display:none;" 时的 CSS 高度过渡

【英文标题】：CSS height transition on removal of style="display:none;"

【发布时间】：2018-12-21 08:24:04

【问题描述】：

我有html这个基本上是这样的：

<span>
  <input name="checked_field" type="text" />
  <p class="has-warning danger" style="display:none;"> error.first() </p>
</span>

display:none 在加载时由 javascript 添加。如果用户在checked_field 中键入了无效值，则会将其删除。

由于框架通过简单地删除 style="display:none;" 来控制可见性，我想知道：当通过 JavaScript 删除 display:none 时，是否可以通过纯 CSS 规则转换高度和可见性？同样，鉴于我无法添加第二类，但我坚持使用 JavaScript 框架删除 style。

【问题讨论】：

您不能使用纯 CSS afaik 从 display:none 转换高度。如果你定义了一个特定的高度或者做max-height hack，你可以使用 vue 转换来做到这一点。你也可以使用我写的这个库从display: none转换到height: auto，github.com/guanzo/vue-smooth-height

已接受的答案确实提供了仅 CSS 的解决方案，但是您的组件非常值得研究，我会这样做，谢谢！

【参考方案1】：

我们可以通过覆盖display:none 属性来实现这一点。

.has-warning, .has-warning[style*='display:none'] 
    transition: all 1s;
    display: block !important;
    height: 0;
    opacity: 0;


.has-warning:not([style*='display:none']) 
    height: 50px;
    opacity: 1;

这是一个 JS Fiddle：https://jsfiddle.net/eywraw8t/165903/

警告！ CSS 将看到 display:none 与 display: none 不同（中间有空格）所以如果它一开始不起作用，请检查。

【讨论】：

我认为这是一种优雅的方法。我继续更新了您的 jsfiddle，尤其是将初始的 height:0 转换为 height: inherit。但是我不确定实际的 slide 是否正常工作.. jsfiddle.net/sfullman/dkecm1hv

酷。我很高兴它帮助了你:)

顺便说一下，将其设置为初始值不起作用。您需要将高度设置为实际单位才能使过渡工作。 initial、inherit、auto 值不会为高度设置动画，但不透明度仍然有效。 :)