一、使用css3實現動畫

css3動畫的核心是定義transition或?keyframes 兩種。

keyframes：設置多個關鍵幀來控控制不懂時間下動畫對象屬性的值，（可循環的）

transition：自動完成不同狀態的平滑過度，不管中間狀態。（一次性的）

transition 設置動畫

一次性的操作，在 ‘交互操作’ 的樣式中，添加transition即可

舉例說明：

.demo{background-color: blueviolet;width: 100px;height: 100px;margin: 0 auto;} .demo:hover{background-color: aquamarine;width: 200px;transition: all 2s ; /*要變化的樣式名，持續時間，必須寫！ */}

transition屬性為：

/* 用來設置動畫的屬性 */ transition-property: width, height, background-color;/* 用來設置動畫執行的時長 */ transition-duration: 2s;/* 用來進行延時設置 */ transition-delay: 0s;/* 用來設置動畫的執行方式，linear表示線性 ,更多效果請查看 https://easings.net/ */ transition-timing-function: linear;

以上四個屬性可以寫成綜合屬性：

/*transition: 讓哪些屬性進行過度 過渡的持續時間 運動曲線 延遲時間;*/transition: all 3s linear 0s;

以下是拓展，可看可不看：

高級動畫 = transition +? 更高級的樣式（ 2d轉換 / 3d轉換 ）

2d轉換：旋轉、縮放、位移、

/* 旋轉 */ /* transform:rotate(角度deg) */ transform: rotate(50deg) /* 縮放 */ /* transform:scale(x軸縮放的倍數,y軸縮放的倍數) */ transform: scale(2,0.5) /* 位移 */ /* transform:translate(水平位移,垂直位移) */ transform: translate(-50%,50px)

3d轉換：旋轉、位移、...（透視、3d呈現）

/* 旋轉 */ transform: rotateX(360deg) /*rotateX：繞x軸旋轉360度 */ transform: rotateY(50deg) transform: rotateZ(50deg) /* 位移 */ transform: translateX(50px) /*transform:translate(沿x軸位移，左-右+) */ transform: translateY(50px) transform: translateZ(50px)

@keyframes 設置動畫

css樣式中添加animation 、@keyframes 如下

.box{width: 100px;height: 100px;margin: 0 auto;/* animation：關鍵幀名字 持續時間 線性 循環 延遲時間 關鍵幀from與to反轉 */animation: name 2s linear infinite 1s reverse;}@keyframes name {from{background-color: green}to{background-color: yellow;}}

二、JS實現動畫（不建議）

<div class="app"><div class="box" @click="click" :style="{width:width+'px',height:height+'px',backgroundColor:'red'}"></div></div><script>const app = Vue.createApp({data() {return {width: 100,height: 100,timer: null}},methods: {click() {this.timer = setInterval(() => {if (this.width >= 200) returnthis.width++this.height++}, 50)}},})app.mount('.app')</script>

三、vue實現動畫

6種css class ，如何實現動畫？

確保vue框架正確的引入了，2.x及以上版本

在需要添加過渡效果的元素上外添加標簽<transition>或<transition-group>。包裹著過度的元素，如果有多個過度的話，為標簽添加name="{自定義類名前綴}"屬性來區分，apear掛到頁面可顯示動畫

給元素添加狀態,可用是v-if,v-show,數組增減等…

定義過度動畫每個狀態的css屬性：進入前后v-enter-(active/from/to)…，退出前后v-leave…

改變元素狀態，查看動畫效果 @keyframes 關鍵幀名{}?

html部分：

<transition name="hello" appear><h1 v-show="isShow">你好呀</h1> </transition> <transition-group name="hello" appear><h1 v-show="isShow" key="1">你好呀</h1> /*必須有key*/<h1 v-show="isShow" key="2">哈嘍~ </h1> </transition-group>

css部分：

.hello-enter-active{animation: donghua 2s linear} .hello-leave-active{animation:donghua 2s reverse}@keyframes donghua {from{background-color: green;}to{background-color: yellow;}}

JavaScript部分：

data(){return {isShow:true,}}

集成第三方動畫：查看Animate.css 動畫庫

1、安裝???npm install animate.css --save?

2、引入? ?import 'animate.css';

3、使用 ，<transition >中，name必須是：animate__animated animate__bounce

? ? ? ? ? ? ? ? ?<transition >中，添加enter-active-class 和 leave-active-class屬性

<transition name="animate__animated animate__bounce" appear enter-active-class='animate__swing' leave-active-class='animate__swing'><h1 v-show="isShow">你好呀</h1> </transition>

總結

以上是生活随笔為你收集整理的分别实现：css动画、js动画、vue动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。