在vue中同時使用過渡和動畫

2021-09-11 07:21:45 字數 785 閱讀 7852

我們先來看乙個例子：



hello world


change



hello world
這樣重新整理的時候也就會有動畫效果了。現在這個元素上只有animate這個庫里的動畫效果，相當於@keyframes的動畫 效果，我們希望結合transition過渡的效果，可以這樣：



hello world


change
這樣動畫就有乙個透明度變化的效果。現在我們很明顯的知道transition過渡的效果是3s，那麼animate提供的動畫效果是幾秒呢？開啟animate.css原始碼進行檢視，實際上animated定義的動畫時長是1s：

.animated
那麼問題來了，最終動畫執行的時間是以什麼為標準來計算的呢？這個時候無我們可以手動來設定動畫執行的時長，我們現在已3s為整個動畫執行的時間，可以這麼設定：

hello world
表示動畫的時長以transition執行的時長為準。除了這樣設定，我們還可以自定義總時長：

hello world
表示動畫樣式5秒後才會被清除掉，而文字3秒就會彈出來。設定的更複雜一些，可以寫成，入場動畫為5秒，出場動畫為8秒：

hello world

css3中的變換 動畫和過渡

變換 分為2d變換和3d變換，但一次只能用乙個變換屬性，多個的話最後乙個會覆蓋前面所有最終被瀏覽器實現，變換可以成為過渡和動畫的乙個待變引數 類似width,opacity等 過渡 是動畫的初始模型和極簡實現，只有初始狀態 初始幀 和啟用狀態 結束幀 動畫 可定義初始幀 中間幀 結束幀，通過多幀 細...

在vue專案中使用過濾器

1 在src目錄下utils資料夾裡新建乙個filter.js檔案 處理遊戲用時顯示格式 如1分20秒 1 20 let formattime value else 在元件中直接呼叫即可，如 export default在main.js檔案中全域性註冊過濾器 import filter from u...

Vue基礎 在模板中使用過濾器

vue 測試版本 vue.js v2.5.13 官網給了過濾器的兩種使用方式 1 你可以在乙個元件的選項中定義本地的過濾器 結合例項，我給兩個 div id input type text v model id placeholder please enter your id p your id i...