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;"来控制可见性，因此我想知道：当通过display:none删除{ 'title': title, 'author': author, 'date': date, 'raw_url': raw_url, 'download_url': download_url, }时，是否可以通过纯CSS规则转换高度和可见性JavaScript？再次，鉴于我无法添加第二个类，但是在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（位于两者之间的空格）不同，因此如果一开始不起作用，请进行检查。

移除style =“ display：none;”时的CSS高度过渡

1 个答案: