使用 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> ~~~