文章詳情頁
一個CSS3 動畫執(zhí)行完成后的問題...
瀏覽：249日期：2023-08-04 09:53:11
問題描述
例:
在執(zhí)行完一段css3動畫后需要隱藏這個元素如何操作？也就是讓它不重復動作.
使用animation參數forwards無效.
注：前提是不使用jQuery情況下能做到么？
問題解答
回答1：這個隱藏的話可以設置opacity：0
我們可以讓一個元素的默認opacity=0
把動畫放到一個一個類上，然后給把這個類付給這個屬性
@keyframes ani{ 0%{opacity: 1}//此處顯示轉換為1 動畫結束后就會自動隱藏了，因為元素的opacity為0，應該使用 display也可以，但我沒用過，因為display沒有動畫效果}回答2：
不用jQUery，JavaScript可以接受么?
取決不同的類型，動畫播放過程會觸發(fā)兩類事件：1. AnimationEvent2. TransitionEvent
動畫結束的事件的兩個實現分別是：1. animationend2. transitionend
Demo頁面在這里，只測試過Chrome：http://codepen.io/longtian/pen/jEyrzN
兼容性大坑可以看AngularUI的這部分源碼https://github.com/angular-ui/bootstrap/blob/7512b93fecb6f27df4f5aeba4c756c0c36aebbf2/src/transition/transition.js#L59
回答3：可以使用js的定時器。把定時器時間設置成和css動畫時間一樣就行了
回答4：http://jsfiddle.net/fevwehk3/
標簽：
CSS
相關文章：
1. golang - 用IDE看docker源碼時的小問題2. javascript - 請指條明路，angular的$event，在select中卻是undefined？3. 我何時應該在Java中使用JFrame.add（component）和JFrame.getContentPane（）。add（component）4. 前端 - @media query 使用出現的問題？5. html - css氣泡，實現“倒三角（不知道算不算三角了）”可透明的。6. 運行python程序時出現“應用程序發(fā)生異常”的內存錯誤？7. docker - 如何修改運行中容器的配置8. 利用IPMI遠程安裝centos報錯！9. phpstudy8.1沒集成mysql-front10. html5和Flash對抗是什么情況？
排行榜
網公網安備