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

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

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

Oliver Williams · 技术社区 · 7 年前

我有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 回复 | 直到 7 年前

Julian Paolo Dayag 7 年前

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

推荐文章

Luckkks · 过渡色工作不正常

7 月前

BogisW · CSS动画按钮/悬停时为span内容文本添加CSS转换

1 年前

markisawesome4 · 按钮:当您将鼠标移离按钮时,悬停时显示的内容下移后

2 年前

Bruno Oliveira · 如何在CSS转换完成后调用函数-React

2 年前

Ancross · 为什么我的小CSS动画不会触发?

3 年前

Jorge · :before和:after伪元素以接收过渡效果

7 年前

Arsalan Khattak · 线性渐变过渡

7 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

7 年前

Paul · 悬停时变换比例不缩放

7 年前

Willem van der Veen · CSS转换结合JS clickEvent

7 年前