5-4Vue中的 Js 动画与 Velocity.js 的结合 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的 Js 动画与 Velocity.js 的结合</title> <script src="vue.js"></script> <link rel="stylesheet" href="animate.css"> <script src="velocity.min.js"></script> <style> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 3s; } </style> </head> <body> <div id="root">       <transition name="fade" :duration="{enter:5000,leave:10000}" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" appear appear-active-class="animated swing fade-center-active" enter-active-class="animated swing fade-leave-active" leave-active-class="animated shake" > <div v-show="show">Hello World</div> </transition> <button @click="handleClick">toggle</button> </div> <script> var vm = new Vue({ el: '#root', data: { show: true }, methods: { handleClick() { this.show = !this.show }, handleBeforeEnter(el) { // el.style.color = 'red' el.style.opacity = 0 }, handleEnter(el, done) { // setTimeout(() => { // el.style.color = 'green' // // done() // }, 2000) // setTimeout(() => { // done(); // }, 4000) Velocity(el, { opacity: 1 }, { duration: 5000, complete: done }) }, handleAfterEnter(el) { // el.style.color = 'black' console.log('动画结束') } } }) </script> </body> </html> ~~~