文章詳情頁
前端 - CSS3 如何設計節點刪除(對應標簽也會刪除)的動畫?
瀏覽：89日期：2023-08-10 16:39:47
問題描述
CSS3 的效果現在很多, 單純的退出動畫直接用類庫可以做到: http://daneden.me/animate/但這樣有一個問題, 因為 CSS3 的動畫都是需要元素一直存在的,如果做應用遇到有刪除, 為了好的體驗加上動畫, 那么刪除的動畫怎么做?如果刪除元素, 動畫就沒了; 如果延時刪除元素, 動畫變成異步去很麻煩了.有沒有好的方案來實現刪除的動畫?
問題解答
回答1：用css3的keyframes試試
在100%的時候實應用隱藏的display:none;
回答2：可以監聽animationend或者transitionend事件，動畫或者漸變結束后讓它消失。這樣不需要用動keyframes。
$('.yourClass').addClass('animationClass').on(’transitionend webkitTransitionEnd oTransitionEnd otransitionend animationend webkitAnimationEnd’, function(){$('.yourClass').hide();});
不需要消失的時候unbind事件即可
標簽：
CSS
相關文章：
1. node.js - webpack-dev-server正常運行，webpack打包卻出錯，怎么辦？2. android - 哪位大神知道java后臺的api接口的對象傳到前端后輸入日期報錯，是什么情況？求大神指點3. 微信內網頁上傳圖片問題4. mysql - 瞬間流量很高的網站，要頻繁的插入數據到數據庫，應該怎么解決這個問題？5. python - angular route 與 django urls 沖突怎么解決？6. javascript - 關于行內元素onclick事件，為什么會出錯?7. javascript - 關于vuejs的v-for循環問題8. 輸入地址報以下截圖錯誤，怎么辦？9. javascript - 關于iscroll的一段代碼，希望有人解釋10. 非root安裝MySQL5.6報錯，求助！！！
排行榜
網公網安備