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

Question

我有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。

Answer 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 不同（中间有空格）所以如果它一开始不起作用，请检查。