@ Before-enter, after a hidden, click it to display the time, it will trigger before the show. Different @enter, the animation is triggered during execution. Trigger is done @ after-enter after completion. These are achieved by js hook, that is, to achieve js:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> </head> <body> <div id="root"> //自定义class名字: <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" > <div v-show="show">hello</div> </ Transition>red" }, <button @ click = "handleClick" > switching </ Button> </ div> <Script type = "text / JavaScript"> var Vue new new VM = ({ EL: "#root", Data: { Show: to true }, Methods: { the handleClick: function () { ! = this.Show this.Show }, // EL refers animation package label handleBeforeEnter: function (EL) { //console.log("handleBeforeEnter ") // label click show hidden from the time, turned red el.style.color = "red" // receive two callback functions, el ibid, done handleEnter: function (EL, DONE) { display before // red, green after two seconds into the setTimeout (() => { el.style.color = "Green" }, 2000) the setTimeout (() => { // but four seconds before telling vue end (that is, 2 seconds after the green, and after 4-2 seconds black) done () // this done is very important, implementation of end after tell vue, has been performed }, 4000) }, handleAfterEnter: function (EL) { el.style.color = "Black" } } }); </ Script> </ body> </html>
Of course, in addition to admission animation, as well as appearances animation:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> </head> <body> <div id="root"> //自定义class名字: <transition name="fade" @before-leave="handleBeforeLeave" @leave="handleLeave" @after-leave="handleAfterLeave" > <div v-show="show">hello</div> </ Transition> <Button @ = the Click "the handleClick"> switching </ Button> </ div> <Script type = "text / JavaScript"> var Vue new new VM = ({ EL: "#root", Data: { Show : to true }, Methods: { the handleClick: function () { ! = this.Show this.Show }, // EL refers to a label wrapped animated handleBeforeLeave: function (EL) { //console.log("handleBeforeLeave ") // hide the label from the display when clicking into the red el.style.color = "red" }, // receive two callback functions, EL supra, DONE handleLeave: function (EL, DONE) { display before // red, green after two seconds into the setTimeout (() => { el.style.color = "Green" }, 2000) the setTimeout (() => { // but four seconds before telling vue end (that is, 2 seconds after the green, and after 4-2 seconds black) done () // this done is very important, implementation of end after tell vue, has been performed }, 4000) }, handleAfterLeave: function (EL) { the setTimeout (() => { el.style.color = "Black" }, 2000) } } }); </script> </body> </html>
Use velocity. Download: http://velocityjs.org/
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script> <script src="./velocity.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> </head> <body> <div id="root"> //自定义class名字: <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" > <div v-show="show">hello</div> </transition> <button @click="handleClick">切换</button> </div> <script type="text/javascript"> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show }, //el指的是动画包裹的标签 handleBeforeEnter: function(el) { el.style.opacity = 0; }, // receive two callback functions, el ibid, done handleEnter: function (EL, DONE) { // Note that to add complete: done vue tell end Velocity (EL, {Opacity: 1}, {DURATION: 1000, complete: done}) }, handleAfterEnter: function (EL) { Alert ( "end of the animation") } } }); </ Script> </ body> </ HTML>