Vue中實現(xiàn)動畫效果的多種方法小結
平時我們能在網(wǎng)頁上看到很多動畫效果,這些效果看起來就很引人注目。所以呢,我們是不是也可以在自己的項目中添加一些動畫效果,讓我們的頁面看起來更加的高端大氣上檔次,博人眼球。所以就特意的去學習了一下關于Vue的一些動畫效果,下面是我對實現(xiàn)動畫效果的一些總結,希望可以幫助大家,如果有什么不對的地方,還望大佬們批評指正一下,感謝。
前戲準備
- 先創(chuàng)建一個Vue項目,并將一些html和css樣式先寫好
- 設計一個小卡片,點擊按鈕就可以出現(xiàn)一個emoji
- 然后通過添加動畫效果,來修飾emoji的展現(xiàn)和消失。
大致代碼如下:
template
部分:
<div class="page"> <div class="card"> <div class="card__header"> <h3 class="card-title">{{ name }}</h3> <div class="card-subtitle">Transition & Animation</div> </div> <div class="card__content"> <div :class="['emoji',{hidden:!isActive}]">?</div> </div> <div class="card__action"> <button type="button" @click="isActive =!isActive">請按這里</button> </div> </div> </div>
script setup
部分:
import {ref} from 'vue' const name ='Vue動畫' const isActive =ref(true)
style lang="css" scoped
部分:為了更好的演示,我將不需要更改的css樣式打包起來,避免代碼太亂了,不好修改。
@import './styles/app.css'; @import './styles/card.css';
card.css
樣式組件:
.card { display: flex; flex-direction: column; align-items: center; max-width: 300px; box-sizing: border-box; padding: 32px; margin: 0 auto; background: #f8f8f8; border-radius: 10px; } .card__header { text-align: center; margin-bottom: 32px; } .card-title { margin-bottom: 8px; } .card-subtitle { font-size: 12px; color: #989898; } .card__content { min-height: 250px; } .card__action > button { outline: none; border: none; background: none; border: 2px solid #d3c7c7; padding: 10px 24px; cursor: pointer; margin: 4px; } .card__action > button:active { opacity: 0.8; }
app.css
樣式組件
input[type='text'], textarea, select { padding: 4px 8px; margin: 8px 0; margin-right: 8px; font-size: 16px; } label { margin-left: 4px; } .page { padding: 32px; margin: 32px; } .emoji { font-size: 80px; } .hidden { opacity: 0; }
這個時候的效果圖是這樣的:
css中的transition和transform
在 CSS 中,transition
和 transform
是兩個非常有用的屬性,它們可以為網(wǎng)頁元素的樣式變化添加動畫效果。那他們該怎么用呢?
transition
transition 用于創(chuàng)建平滑的過渡效果,當元素的某個屬性值發(fā)生改變時,在指定的時間內逐漸完成過渡。
語法:transition
: property duration timing-function delay;
property:指定要過渡的 CSS 屬性,例如 width、height、background-color 等??梢灾付ǘ鄠€屬性,用逗號分隔,也可以不指定。
duration:過渡的持續(xù)時間,以秒(s)或毫秒(ms)為單位。
timing-function:指定過渡的速度曲線,常見的值有 linear(勻速)、ease(默認,緩入緩出)、ease-in(緩入)、ease-out(緩出)、ease-in-out(緩入緩出)等 ,一般不設置的話都是默認值ease。
delay:指定過渡效果的延遲時間,以秒(s)或毫秒(ms)為單位。
transform
transform 用于對元素進行變換操作,例如旋轉、縮放、移動、傾斜等。
常見的變換函數(shù)有:
rotate():旋轉元素,參數(shù)為角度值,例如 rotate(45deg) 表示順時針旋轉 45 度。
scale():縮放元素,參數(shù)可以是一個值(等比例縮放)或兩個值(分別指定水平和垂直方向的縮放比例),例如 scale(2) 表示放大兩倍,scale(2, 0.5) 表示水平方向放大兩倍,垂直方向縮小一半。
translate():移動元素,參數(shù)可以是一個值(水平移動)或兩個值(分別指定水平和垂直方向的移動距離),例如 translate(50px) 表示水平向右移動 50 像素,translate(50px, 100px) 表示水平向右移動 50 像素,垂直向下移動 100 像素,不過一般只設定某個方向的時候我們會用到translateX()和translateY()。
skew():傾斜元素,參數(shù)可以是一個值(水平傾斜)或兩個值(分別指定水平和垂直方向的傾斜角度),例如 skew(30deg) 表示水平傾斜 30 度,skew(30deg, 15deg) 表示水平傾斜 30 度,垂直傾斜 15 度。
不過在實際應用中,transition 和 transform 常常結合使用,以實現(xiàn)更加豐富和復雜的動畫效果。所以我們在app.css
樣式組件中的.emoji
和.hidden
添加一點屬性就好,其他不用修改。
.emoji { font-size: 80px; transition: 0.5s; } .hidden { opacity: 0; transform: translateX(30px); }
來看看效果圖:
css中的animation
animation 是 CSS 中用于創(chuàng)建更復雜和自定義動畫的強大屬性。
語法:
animation:
name duration timing-function delay iteration-count direction fill-mode;
name:指定動畫的名稱,通過 @keyframes 規(guī)則來定義。
duration:動畫的持續(xù)時間,以秒(s)或毫秒(ms)為單位。
timing-function:動畫的速度曲線,與 transition 中的類似,如 linear、ease 等。
delay:動畫開始前的延遲時間。
iteration-count:動畫的播放次數(shù),可以是具體數(shù)字、infinite(無限次)。
direction:動畫的播放方向,可選值有 normal(默認,正向播放)、reverse(反向播放)、alternate(交替播放,先正向后反向)、alternate-reverse(交替播放,先反向后正向)。
fill-mode:規(guī)定動畫在執(zhí)行前后的樣式,可選值有 none(默認,動畫結束后回到初始狀態(tài))、forwards(動畫結束后保持最后一幀的樣式)、backwards(在動畫延遲期間應用動畫的第一幀樣式)、both(向前和向后填充模式都應用)。
@keyframes 規(guī)則
通過 @keyframes 來定義動畫的關鍵幀。
@keyframes pulse { from{ transform:scale3d(1,1,1); } 50%{ transform:scale3d(1.5,1.5,1.5); } to{ transform:scale3d(1,1,1) } }
定義了pulse
動畫的不同狀態(tài)。通過設定transform
屬性中的scale3d()
函數(shù),元素在動畫過程中會在三維空間內縮放。具體來說,from
關鍵字表示動畫開始時元素的狀態(tài),這里是原始大?。?,1,1);50%
表示動畫中間的狀態(tài),元素被放大到1.5倍(1.5,1.5,1.5);to
關鍵字表示動畫結束時元素的狀態(tài),它會回到原始大小(1,1,1),確保動畫循環(huán)時的連貫性。
animation
相較于 transition
更加靈活和強大,可以創(chuàng)建多關鍵幀、更復雜的動畫效果,并且能夠更好地控制動畫的播放次數(shù)、方向等參數(shù)。但同時,在使用時也需要注意性能優(yōu)化,避免過度使用復雜的動畫影響頁面的加載和渲染速度。
OK,那我們再創(chuàng)建一個animation.css
樣式組件:
.pulse{ animation-name:pulse; animation-duration: 1s; animation-iteration-count: infinite; } /* css 性能優(yōu)化 scale3d() GPU加速 動畫不要影響周圍的文檔流(圖層)*/ @keyframes pulse { from{ transform:scale3d(1,1,1); } 50%{ transform:scale3d(1.5,1.5,1.5); } to{ transform:scale3d(1,1,1) } }
記得在vue中style lang="css" scoped
部分引入:
<style lang="css" scoped> @import './styles/app.css'; @import './styles/card.css'; @import './styles/animation.css'; </style>
并且在template
部分修改代碼
來看看效果圖:
vue中的transition內置組件
在 Vue 中,transition 是一個內置組件,用于在元素或組件進入和離開 DOM 時應用動畫效果。它可以將進入和離開動畫應用到通過默認插槽傳遞給它的元素或組件上。
transition 組件的一些特點和用法如下:
觸發(fā)條件:可以由 v-if 或 v-show 所觸發(fā)的切換、動態(tài)組件的切換、組件根節(jié)點的切換或特殊元素 切換的動態(tài)組件觸發(fā)。
CSS 過渡類:transition 組件會自動檢測目標元素是否應用了 CSS 過渡或動畫,并在適當?shù)臅r機 添加和移除 相應的 CSS 過渡類。這些過渡類包括 v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active 和 v-leave-to,用于定義進入和離開動畫的不同階段。
修改
template
部分:
- 添加css樣式:
效果圖:
- 過渡效果命名:可以通過給 組件傳遞 name 屬性來聲明一個過渡效果名,這樣過渡類將以指定的名字作為前綴。
- 修改
template
部分:
- 修改
- 添加css樣式:
效果圖:
結合 CSS 過渡或動畫:一般會搭配原生 CSS 過渡或動畫一起使用,通過設置 transition
或者animation
CSS 屬性來定義動畫的屬性、持續(xù)時間和速度曲線等。
- 修改
template
部分:
- 添加css樣式(注意這里還調用了
animation.css
樣式組件中的css):
效果圖:
當然,還有其他的用法,例如:
自定義過渡類:可以向 組件傳遞 enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class 和 leave-to-class 等屬性來指定自定義的過渡類,這些類的優(yōu)先級高于普通類名。
JavaScript 鉤子函數(shù):提供了一些 JavaScript 鉤子函數(shù),如 beforeEnter、enter、afterEnter、enterCancelled、beforeLeave、leave、afterLeave 和 leaveCancelled 等,可以在這些鉤子函數(shù)中執(zhí)行自定義的 JavaScript 邏輯。
通過合理使用 transition 組件和相關的過渡類、鉤子函數(shù),可以實現(xiàn)各種豐富的動畫效果,提升用戶體驗。同時,可以結合 CSS 過渡和動畫來進一步增強動畫的表現(xiàn)力。
第三方庫Animate.css
在 Vue 項目中使用 animation.css 庫,您可以按照以下步驟進行操作:
安裝 animation.css 庫:您可以使用 npm 或 yarn 來安裝。
使用 npm :npm install animation.css
使用 yarn :yarn add animation.css
在 Vue 組件中引入 animation.css 樣式文件。在main.js中引入
然后組件的模板中,為需要添加動畫的元素添加相應的類名。animation.css 提供了很多預定義的動畫類名,我們可以根據(jù)需要選擇。 我們可以在Animate.css文檔中進行挑選,并查看如何使用。
引入 Animate.css 后,將類animate__animated與任何動畫名稱一起添加到元素(不要忘記animate__前綴?。?/p>
修改
template
部分:
效果圖:
結語
制作動畫的效果有很多,在我們的項目中加入這些動畫效果,更能博人眼球引人注目,顯得更加的高端優(yōu)雅。希望這些可以幫助到你,結合你天馬行空的想法,去制作多種動畫效果。
以上就是Vue中實現(xiàn)動畫效果的多種方法小結的詳細內容,更多關于Vue實現(xiàn)動畫效果的資料請關注腳本之家其它相關文章!
相關文章
select的change方法傳遞多個參數(shù)的方法詳解
element-ui中的select,checkbox等組件的change方法的回調函數(shù)只有當前選擇的val,如果想再傳入自定義參數(shù)怎么辦,本文給大家分享select的change方法如何傳遞多個參數(shù),感興趣的朋友一起看看吧2024-02-02談談VUE種methods watch和compute的區(qū)別和聯(lián)系
本篇文章主要介紹了談談VUE種methods watch和compute的區(qū)別和聯(lián)系,具有一定的參考價值,有興趣的可以了解一下2017-08-08基于element-ui對話框el-dialog初始化的校驗問題解決
這篇文章主要介紹了基于element-ui對話框el-dialog初始化的校驗問題解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09Vue Vine實現(xiàn)一個文件中寫多個組件的方法(最近很火)
Vue Vine提供了全新Vue組件書寫方式,主要的賣點是可以在一個文件里面寫多個vue組件,Vue Vine是一個vite插件,vite解析每個模塊時都會觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實現(xiàn)一個文件中寫多個組件,感興趣的朋友一起看看吧2024-07-07vue3+ts import引入第三方js文件報錯的2種解決方法
這篇文章主要給大家介紹了關于vue3+ts import引入第三方js文件報錯的2種解決方法,在Vue中通常我們引入一個js插件都是使用npm方式下載然后import使用的,需要的朋友可以參考下2023-08-08vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明
這篇文章主要介紹了vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue如何解決sass-loader的版本過高導致的編譯錯誤
這篇文章主要介紹了vue如何解決sass-loader的版本過高導致的編譯錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06