时间戳

首页 > 解决方案 > 将显示块与不透明度淡入（引导选项卡）结合起来？

css - 将显示块与不透明度淡入（引导选项卡）结合起来？

问题描述

我有 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;}

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

无论如何要保持动画不透明度淡化？

标签： csstwitter-bootstrap-3

解决方案

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>

推荐阅读