代码之家 › 专栏 › 技术社区 › Oliver Williams

删除style=“display:none;”时的CSS高度转换

vee-validate javascript-framework css-transitions vue.js

1

Oliver Williams · 技术社区 · 6 年前

我有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删除?再一次,假设我不能添加第二个类,但是仍然坚持使用JavaScript框架删除风格 .

1 回复 | 直到 6 年前

1

Julian Paolo Dayag 6 年前

我们可以通过超越 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 (中间有空格)所以如果一开始不起作用,检查这个。