問題描述

當(dāng)監(jiān)聽到事件時，更改class,但是看不到過渡效果。transition用js改變class不能實現(xiàn)過渡效果嗎，怎樣才能實現(xiàn)呢？

.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); } }

問題解答

你用display: none之后，他就會直接執(zhí)行，然后被隱藏，你看不到過渡的效果。。。

你可以在trasition的回調(diào)函數(shù)里面使他display: none;

xxx.addEventListener(’transitionend’, function () { , false);

在動畫結(jié)束后對他進(jìn)行操作，也可連續(xù)動畫。