文章詳情頁
前端 - CSS3 如何設計節點刪除(對應標簽也會刪除)的動畫?
瀏覽:99日期: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. mysql 查詢身份證號字段值有效的數據2. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?3. 視頻文件不能播放,怎么辦?4. html5 - HTML代碼中的文字亂碼是怎么回事?5. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題6. visual-studio - Python OpenCV: 奇怪的自動補全問題7. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處8. javascript - 彈出一個子窗口,操作之后關閉,主窗口會得到相應的響應,例如網站的某些登錄界面,django后臺的管理等,這是怎么實現的呢?9. javascript - ios返回不執行js怎么解決?10. android - 分享到微信,如何快速轉換成字節數組
排行榜
