文章詳情頁
css3 - transition用js改變class不能實現過渡效果嗎？怎樣才能實現呢？
瀏覽：127日期：2023-06-29 09:15:56
問題描述
當監聽到事件時，更改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); } }
問題解答
回答1：你用display: none之后，他就會直接執行，然后被隱藏，你看不到過渡的效果。。。
你可以在trasition的回調函數里面使他display: none;
xxx.addEventListener(’transitionend’, function () { , false);
在動畫結束后對他進行操作，也可連續動畫。
標簽：
CSS
相關文章：
1. docker容器呢SSH為什么連不通呢？2. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗！3. docker - 各位電腦上有多少個容器啊？容器一多，自己都搞混了，咋辦呢？4. docker網絡端口映射，沒有方便點的操作方法么？5. angular.js - react的redux和vue的vuex，angular呢6. javascript - 回調函數和普通調用函數的區別？7. eclipse - 如何解決no atk-wrapper in java.library.path8. javascript - input框相關問題9. docker start -a dockername 老是卡住，什么情況？10. docker images顯示的鏡像過多，狗眼被亮瞎了，怎么辦？
排行榜
網公網安備