文章詳情頁
前端 - CSS3 如何設(shè)計節(jié)點(diǎn)刪除(對應(yīng)標(biāo)簽也會刪除)的動畫?
瀏覽:118日期:2023-08-10 16:39:47
問題描述
CSS3 的效果現(xiàn)在很多, 單純的退出動畫直接用類庫可以做到: http://daneden.me/animate/但這樣有一個問題, 因為 CSS3 的動畫都是需要元素一直存在的,如果做應(yīng)用遇到有刪除, 為了好的體驗加上動畫, 那么刪除的動畫怎么做?如果刪除元素, 動畫就沒了; 如果延時刪除元素, 動畫變成異步去很麻煩了.有沒有好的方案來實(shí)現(xiàn)刪除的動畫?
問題解答
回答1:用css3的keyframes試試
在100%的時候?qū)崙?yīng)用隱藏的display:none;
回答2:可以監(jiān)聽animationend或者transitionend事件,動畫或者漸變結(jié)束后讓它消失。這樣不需要用動keyframes。
$('.yourClass').addClass('animationClass').on(’transitionend webkitTransitionEnd oTransitionEnd otransitionend animationend webkitAnimationEnd’, function(){$('.yourClass').hide();});
不需要消失的時候unbind事件即可
標(biāo)簽:
CSS
相關(guān)文章:
1. android - 百度地圖加載完成監(jiān)聽2. nignx - docker內(nèi)nginx 80端口被占用3. dockerfile - [docker build image失敗- npm install]4. 關(guān)于docker下的nginx壓力測試5. java - 阿里的開發(fā)手冊中為什么禁用map來作為查詢的接受類?6. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?7. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗!8. docker網(wǎng)絡(luò)端口映射,沒有方便點(diǎn)的操作方法么?9. macos - mac下docker如何設(shè)置代理10. html5 - 使用echarts中的圖表 一個頁面導(dǎo)入了好幾個js圖表 實(shí)現(xiàn)echarts圖表隨著瀏覽器窗口變化而變化時出現(xiàn)了問題
排行榜

熱門標(biāo)簽