Question

我有2个类的元素（淡入淡出和隐藏）

<div id="example" class="fade hidden"></div>

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.hidden {display: none;}

单击时，会添加一个类（.in和.shown）

.fade.in {
    opacity: 1;
}

.shown {display: block !important;}

我的问题是，通过执行display：block，没有不透明度的动画。只是显示完整的元素。

无论如何要保持动画渐变不透明度？

Answer 1

可以使用display而不是position: absolute。请参阅以下示例：

.fade {
  opacity: 0;
  transition: opacity 1s linear;
}

.hidden {
  position: absolute;
  pointer-events: none;
}

.fade.in {
  opacity: 1;
}

<button onclick="document.getElementById('example').className = 'fade in';">Click</button>
<div id="example" class="fade hidden">Example</div>
<p>Text...</p>

将显示块与不透明度淡入组合（引导标签）？

1 个答案: