使用 Vue 實現基礎的 CSS 過渡與動畫效果 · vue筆記

[TOC] >[success] # 使用 Vue 實現基礎的 CSS 過渡與動畫效果講一下 **動畫** 以及 **過渡** 的基本使用，這里主要是用 **class** 寫好樣式，用vue動態的添加 **class** ，或者動態的添加 **style** 來實現動畫的效果。 >[success] ## 動畫效果 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 Vue 實現基礎的 CSS 過渡與動畫效果</title> <style> /* 定義動畫 */ @keyframes leftToRight { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(0px); } } .animation{ animation: leftToRight 3s ; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 過渡（紅色變綠色這個過程叫過渡），動畫（讓一個元素從上到下，來回做一個彈跳） const app = Vue.createApp({ data(){ return { animate: { animation: true // animation名稱class } } }, methods: { handleClick(){ this.animate.animation = !this.animate.animation } }, template: ` <div :class="animate">hello world</div> <button @click="handleClick">切換</button> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 過渡 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 Vue 實現基礎的 CSS 過渡與動畫效果</title> <style> .transition{ transition: 3s background-color ease; } .blue { background-color: blue; } .green { background-color: green; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 過渡（紅色變綠色這個過程叫過渡），動畫（讓一個元素從上到下，來回做一個彈跳） const app = Vue.createApp({ data(){ return { animate: { transition: true, blue: true, green: false } } }, methods: { handleClick(){ this.animate.blue = !this.animate.blue this.animate.green = !this.animate.green } }, template: ` <div :class="animate">hello world</div> <button @click="handleClick">切換</button> ` }) const vm = app.mount('#root') </script> </html> ~~~ 或者用 **style** 的方式實現 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 Vue 實現基礎的 CSS 過渡與動畫效果</title> <style> .transition{ transition: 3s background-color ease; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 過渡（紅色變綠色這個過程叫過渡），動畫（讓一個元素從上到下，來回做一個彈跳） const app = Vue.createApp({ data(){ return { styleObj: { background: 'blue' } } }, methods: { handleClick(){ if(this.styleObj.background === 'blue') { this.styleObj.background = 'green' } else { this.styleObj.background = 'blue' } } }, template: ` <div class="transition" :style="styleObj">hello world</div> <button @click="handleClick">切換</button> ` }) const vm = app.mount('#root') </script> </html> ~~~