一個CSS3 動畫執行完成后的問題...
問題描述
例:
在執行完一段css3動畫后需要隱藏這個元素如何操作?也就是讓它不重復動作.
使用animation參數forwards無效.
注:前提是不使用jQuery情況下能做到么?
問題解答
回答1:這個隱藏的話可以設置opacity:0
我們可以讓一個元素的默認opacity=0
把動畫放到一個一個類上,然后給把這個類付給這個屬性
@keyframes ani{ 0%{opacity: 1}//此處顯示轉換為1 動畫結束后就會自動隱藏了,因為元素的opacity為0,應該使用 display也可以,但我沒用過,因為display沒有動畫效果}回答2:
不用jQUery,JavaScript可以接受么?
取決不同的類型,動畫播放過程會觸發兩類事件: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/
相關文章:
1. 關于docker下的nginx壓力測試2. docker - 各位電腦上有多少個容器啊?容器一多,自己都搞混了,咋辦呢?3. mac里的docker如何命令行開啟呢?4. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””5. nignx - docker內nginx 80端口被占用6. docker容器呢SSH為什么連不通呢?7. dockerfile - 我用docker build的時候出現下邊問題 麻煩幫我看一下8. docker-compose 為何找不到配置文件?9. docker start -a dockername 老是卡住,什么情況?10. angular.js使用$resource服務把數據存入mongodb的問題。

網公網安備