css3 - transition用js改變class不能實現過渡效果嗎？怎樣才能實現呢？

問題描述

當監聽到事件時，更改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); } }

問題解答

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

你可以在trasition的回調函數里面使他display: none;

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

在動畫結束后對他進行操作，也可連續動畫。