文章詳情頁
前端 - CSS3 如何設計節點刪除(對應標簽也會刪除)的動畫?
瀏覽：142日期：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. javascript - 微信h5發送圖文信息，部分設備點擊“發送”按鈕時沒反應，問題較難重現，如何能找到可能存在問題的點？2. objective-c - 做一個百度地圖定位的demo，結果出錯好多。3. 微信小程序session無法緩存的問題4. java-web - Java WEB：什么樣的jar包必須放到WEB-INF下？有些包放外面tomcat就起不來5. javascript - 關于微信授權的問題。6. java - 輸出4個不相等整數之間所有任意三個整數的乘積7. css - 如何使用 vue transition 實現 ios 按鈕一樣的平滑切換效果8. 如何使用Java1.8編譯1.6JVM可運行的class文件9. angular.js - 公眾號H5頁面 angularjs 怎么動態修改title值（微信6.5.5，動態修改不行 6.5.7闊以）10. node.js - 如何在服務器部署vuejs項目？
排行榜
網公網安備