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

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;" 来控制可见性，我想知道：是否可以通过纯 CSS 规则来转换高度和可见性当通过 JavaScript 删除 display:none 时？同样，考虑到我无法添加第二个 class，但我坚持使用 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 不同（space 在两者之间）所以如果它不开始工作，检查这个。

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

CSS height transition on removal of style="display:none;"

javascript-framework

css-transitions

vue.js

vee-validate