vue.js - 移除 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:noneJavaScript 在加载时添加。如果用户在 中键入无效值，则将其删除checked_field。

由于框架通过简单地删除 style="display:none;"来控制可见性，我想知道：当display:none通过 JavaScript 删除时，是否可以通过纯 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 小提琴：https ://jsfiddle.net/eywraw8t/165903/

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