Vue.js CSS移除样式时的高度转换="；显示：无&引用；

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

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

{{error.first（）}

display:none

是在加载时由JavaScript添加的。如果用户在

checked\u字段中键入无效值，则会将其删除

由于框架通过简单地删除
style=“display:none；”“
”来控制可见性，我想知道：当通过JavaScript删除
display:none
时，是否可以通过纯CSS规则来转换高度和可见性？同样，考虑到我无法添加第二个类，但我仍然坚持使用JavaScript框架删除样式。
我们可以通过覆盖
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小提琴：

警告！CSS将看到
display:none
与
display:none
（中间的空格）不同，因此如果它一开始不起作用，请检查此项。
纯CSS afaik无法从display:none转换高度。如果定义特定高度或执行
max height
hack，则可以使用vue转换来执行此操作。您也可以使用我编写的这个库从
display:none
转换到
height:auto
，接受的答案确实提供了一个CSS唯一的解决方案，但是您的组件非常值得学习，我会这样做，谢谢！我认为这是一种优雅的方法。我继续更新了您的JSFIDLE，特别是将初始的
height:0
转换为
height:inherit
。但是我不确定实际的幻灯片是否有效。。酷。我很高兴它帮了你：）顺便说一句，将它设置为初始值不起作用。您需要将高度设置为实际单位，以使过渡生效。“初始”、“继承”、“自动”值不会设置高度的动画，但不透明度仍然有效。：）