文章詳情頁
一個CSS3 動畫執行完成后的問題...
瀏覽：147日期：2023-08-04 09:53:11
問題描述
例:
在執行完一段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/
標簽：
CSS
相關文章：
1. mysql - 記得以前在哪里看過一個估算時間的網站2. css3 - 純css實現點擊特效3. MySQL中的enum類型有什么優點？4. javascript - 關于<a>元素與<input>元素的JS事件運行問題5. javascript - vue 怎么渲染自定義組件6. python - 啟動Eric6時報錯：’qscintilla_zh_CN’ could not be loaded7. mysql - 查詢字段做了索引為什么不起效,還有查詢一個月的時候數據都是全部出來的，如果分拆3次的話就沒問題，為什么呢。8. ID主鍵不是自增的嗎 為什么還要加null9. android下css3動畫非常卡，GPU也不差啊10. css - 新手做響應式布局， 斷點過后右側出現空白，求幫助，謝謝。
排行榜
網公網安備