問題描述

當(dāng)監(jiān)聽到事件時(shí)，更改class,但是看不到過渡效果。transition用js改變class不能實(shí)現(xiàn)過渡效果嗎，怎樣才能實(shí)現(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之后，他就會(huì)直接執(zhí)行，然后被隱藏，你看不到過渡的效果。。。

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

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

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