我们知道,css animation/transition
不适用于 display: block
&display: none
;
所以我尝试使用
someDom.style.transition = '0.3s'
someDom.style.display='block'
someDom.style.opacity=1
以 fadeIn
播放动画。
但还是不行,因为它运行得太快了。
我知道 setTimeout
这次会很好用,但由于 javaScript 事件循环,我不希望它变成异步事件。
最佳答案
也许这会解决你的问题
const item = document.querySelector('.item');
item.style.display = 'block';
item.classList.add('fadeIn');
.item {
display: none;
width: 100px;
height: 100px;
background: grey;
}
.item.fadeIn {
animation: fadeIn 1s linear;
-webkit-animation: fadeIn 1s linear;
-moz-animation: fadeIn 1s linear;
-o-animation: fadeIn 1s linear;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="item"></div>
关于javascript - 有没有办法在没有异步的情况下获取 dom.style changed 钩子(Hook)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51206864/