当监听到事件时,更改class,但是看不到过渡效果。
transition用js改变class不能实现过渡效果吗,怎样才能实现呢?
.search-page {
position: fixed;
top: 88px;
left: 0;
width: 100%;
height: 100%;
z-index: 200;
transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
&.unactive{
display: none;
opacity: 0;
background-color: rgba(7,17,27,0);
}
&.search-active {
display: block;
opacity: 1;
background-color: rgba(7,17,27,0.6);
}
}
天蓬老师2017-04-17 11:56:16
你用display: none之後,他就會直接執行,然後被隱藏,你看不到過渡的效果。 。 。
你可以在trasition的回呼函數裡面使他display: none;
xxx.addEventListener('transitionend', function () {
, false);
在動畫結束後對他進行操作,也可連續動畫。