文章詳情頁
前端 - CSS3 如何設計節點刪除(對應標簽也會刪除)的動畫?
瀏覽：110日期：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 - mysql如何通過knex查詢今天和七天內的匯總數據2. mysql 插入數值到特定的列一直失敗3. 360瀏覽器與IE瀏覽器有何區別？？？4. Python從URL中提取域名5. mysql - 百萬行的表中是否盡量避免使用update等sql語句？6. python - 在使用Pycharm時經常看到如下的樣式，小括號里紅色的部分是什么意思呢？7. javascript - 新浪微博網頁版的字數限制是怎么做的8. 怎么在網頁中設置圖片進行左右滑動9. javascript - 豆瓣的這個自適應是怎么做的？10. javascript - 用jsonp抓取qq音樂總是說回調函數沒有定義
排行榜
網公網安備