Vue: built-in animation class
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content="bait bark"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Vehemence</title> <script src="dist/vue.global.js"></script> <style> .box { width: 100px; height: 100px; background-color: palegoldenrod; } /* 入场animation */ .v-enter-from { opacity: 0; } .v-enter-active { transition: all 1s ease-in-out; } .v-enter-to { opacity: 1; } /* 离场animation */ .v-leave-from { opacity: 1; } .v-leave-active { transition: all 1s ease; } .v-leave-to { opacity: 0; } </style> </head> <body> <main id="vale"> </main> <template id="t1"> <aside> <transition> <pre class="box" v-show="flag">{{msg}}</pre> </transition> <button @click="flag=!flag">btn</button> </aside> </template> <script> let vail = Vue.createApp({ data () { return { msg: 'rtyu', flag: false } }, template: '#t1' }).mount('#vale') </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content="bait bark"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Vehemence</title> <script src="dist/vue.global.js"></script> <style> .box { width: 100px; height: 100px; background-color: palegoldenrod; } @keyframes shake-from { 0% { opacity: 0; transform: translateX(0); } 50% { opacity: 0.5; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes shake-to { 0% { opacity: 1; transform: translateX(0) } 50% { opacity: 0.5; transform: translateX(50px) } 100% { opacity: 0; transform: translateX(0) } } .valor-enter-active { animation-name: shake-from; animation-duration: 1s; } .valor-leave-active { animation-name: shake-to; animation-duration: 1s; } </style> </head> <body> <main id="vale"> </main> <template id="t1"> <aside> <transition name="valor"> <pre class="box" v-show="flag">{{msg}}</pre> </transition> <transition> <pre class="box" v-show="flag">{{msg}}</pre> </transition> <transition> <pre class="box" v-show="flag">{{msg}}</pre> </transition> <button @click="flag=!flag">btn</button> </aside> </template> <script> let vail = Vue.createApp({ data () { return { msg: 'rtyu', flag: false } }, template: '#t1', }).mount('#vale') </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content="bait bark"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Vehemence</title> <script src="dist/vue.global.js"></script> <style> .box { width: 100px; height: 100px; background-color: palegoldenrod; } @keyframes shake-from { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(100px, 100px, 100px); } 100% { transform: translate3d(0, 0, 0); } } @keyframes shake-to { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(100px, 100px, 100px); } 100% { transform: translate3d(0, 0, 0); } } .v-enter-from { opacity: 0; } .v-enter-active { opacity: 0.5; animation-name: shake-from; animation-duration: 1s; transition: all 5s ease; } .v-enter-to { opacity: 1; } .v-leave-from { opacity: 1; } .v-leave-active { opacity: 0.5; animation-name: shake-to; animation-duration: 1s; transition: all 5s ease; } .v-leave-to { opacity: 0; } </style> </head> <body> <main id="vale"></main> <template id="t1"> <aside> <transition type="transition" :duration="1000"> <pre class="box" v-show="flag">{{msg}}</pre> </transition> <button @click="flag=!flag">btn</button> </aside> </template> <script> let vail = Vue.createApp({ data () { return { msg: 'rty', flag: false } }, template: '#t1' }).mount('#vale') </script> </body> </html>
结合三方动画库 animate.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content="bait bark"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Vehemence</title> <script src="dist/vue.global.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <style> .box { width: 100px; height: 100px; background-color: palegoldenrod; } </style> </head> <body> <main id="vale"></main> <template id="t1"> <aside> <!-- <transition enter-from-class="e1" enter-active-class="e2" enter-to-class="e3" leave-from-class="l1" leave-active-class="l2" leave-to-class="l3"> --> <transition enter-active-class="animate__animated animate__flash" leave-active-class="animate__animated animate__bounce" :duration="{enter:5000,leave:1000}" > <pre class="box" v-show="flag">{{msg}}</pre> </transition> <button @click="flag=!flag">btn</button> </aside> </template> </body> <script> let vail = Vue.createApp({ data () { return { msg: 'rtyu', flag: false } }, template: '#t1' }).mount('#vale') </script> </html>
js hook
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content="bait bark"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Vehemence</title> <script src="dist/vue.global.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <style> .box { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; background-color: palegoldenrod; } </style> </head> <body> <main id="vale"></main> <template id="t1"> <aside> <!-- <transition enter-from-class="e1" enter-active-class="e2" enter-to-class="e3" leave-from-class="l1" leave-active-class="l2" leave-to-class="l3"> --> <transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <pre class="box" v-show="flag">{{msg}}</pre> </transition> <button @click="flag=!flag">btn</button> </aside> </template> </body> <script> let vail = Vue.createApp({ data () { return { msg: 'rtyu', flag: false } }, methods: { beforeEnter (elem) { console.count(elem) elem.style.borderRadius = '0%' }, enter (elem, done) { console.error(elem) elem.style.borderRadius = '50%' const intervalId = setInterval(() => { const radius = elem.style.borderRadius if (radius === '0%') { elem.style.borderRadius = '50%' } else { elem.style.borderRadius = '0%' } }, 2000) setTimeout(() => { clearInterval(intervalId) done() }, 5000) }, afterEnter (elem) { console.dir(elem) elem.style.backgroundColor='aqua' elem.style.borderRadius = '0%' } }, template: '#t1' }).mount('#vale') </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content="bait bark"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Vehemence</title> <script src="dist/vue.global.js"></script> <style> body { font-size: 40px; text-align: center; } .v-enter-from { opacity: 0; } .v-enter-active { opacity: 0.5; transition: all 2s ease-in-out; } .v-enter-to { opacity: 1; } .v-leave-from { opacity: 1; } .v-leave-active { opacity: 0.5; transition: all 2s ease-in-out; } .v-leave-to { opacity: 0; } </style> </head> <body> <main id="vale"></main> <template id="t1"> <aside> <transition mode="out-in" appear> <del v-if="flag">del</del> <pre v-else>pre</pre> </transition> <hr> <button @click="handleClick">btn</button> </aside> </template> <script> let vail = Vue.createApp({ data () { return { flag: true } }, template: '#t1', methods: { handleClick () { this.flag = !this.flag } } }).mount('#vale') </script> </body> </html>
多组件animate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content="bait bark"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Vehemence</title> <script src="dist/vue.global.js"></script> <style> body { font-size: 40px; text-align: center; } .v-enter-from { opacity: 0; } .v-enter-active { opacity: 0.5; transition: all 2s ease-in-out; } .v-enter-to { opacity: 1; } .v-leave-from { opacity: 1; } .v-leave-active { opacity: 0.5; transition: all 2s ease-in-out; } .v-leave-to { opacity: 0; } </style> </head> <body> <main id="vale"></main> <template id="t1"> <main> <transition mode="out-in" appear> <component :is="component"></component> </transition> <hr> <button @click="handleClick">btn</button> <component v-bind:is="'c2'"></component> </main> </template> <script> let c1 = { template: `<ins>ins</ins>` } let c2 = { template: `<kbd>kbd</kbd>` } let vail = Vue.createApp({ data () { return { component: 'c1' } }, components: { c1, c2 }, template: '#t1', methods: { handleClick () { this.component === 'c1' ? this.component = 'c2' : this.component = 'c1' } } }).mount('#vale') </script> </body> </html>
transition-group
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content="bait bark"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Vehemence</title> <script src="dist/vue.global.js"></script> <style> .list-item { display: inline-block; width: 70px; height: 50px; } .v-enter-from { opacity: 0; transform: translateY(30px); } .v-enter-active { transition: all 1s ease-in-out; } .v-enter-to { opacity: 1; transform: translateY(0); } .v-leave-from { opacity: 1; transform: translateY(0) } .v-leave-active { transition: all 1s ease-in-out; } .v-leave-to { opacity: 0; transform: translateY(30px); } </style> </head> <body> <div id="vale"></div> <template id="t1"> <aside> <transition-group> <nav class="list-item" v-for="(item,i) in list" v-bind:key="i">{{item}}</nav> </transition-group> <hr> <button @click="add">add</button> <button @click="del">del</button> </aside> </template> <script> let vail = Vue.createApp({ data () { return { list: ['vagary-1', 'vagary-2'] } }, template: '#t1', methods: { add () { this.list.push(`vagary-${this.list.length + 1}`) }, del () { this.list.pop() } } }).mount('#vale') </script> </body> </html>
