<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <!--Animation incorporated herein to third JS -> < Link the rel = "this stylesheet" the href = "./ lib / animate.css" > <-! Admission fadelUp leave zoomOut -> </ head > < body > < div the above mentioned id = "App" > < the INPUT of the type = "the button" value = "click" @click = "Flag = Flag!" > <-! requirements: click the button, let h3 display, click, let h3 hide - > <! - The first way: -> <transition enter-active-class="animated bounceIn" leave-active-class= "Animated bounceOut" > < H3 V-IF = "In Flag" > This is a H3 of </ H3 > </ Transition > <-! The second way: -> <! - herein: duration = " "unified long to animate entry and departure time milliseconds -> < Transition Enter-Active-class =" bounceIn " Leave-Active-class =" bounceOut " : DURATION =" 200 is " > ! <- here to use animated library to add this library on the element and then choose which effects -> < h3 v-IF = "Flag" class = "Animated " > This is a H3 of </ H3> </ Transition > <-! Used: duration = "{enter: 200 , leave: 400}" are provided to admission duration and departure of the length of time -> < Transition Enter-Active-class = "bounceIn" Leave-Active-class = "zoomOut" : DURATION = "{Enter: 2000, Leave: 400}" > < H3 V-IF = "In Flag" class = "Animated" > this is a H3 of </ H3 > </ Transition > </ div > < Script > // create Vue instance, get ViewModel var vm = new new Vue({ el: '#app', data: { flag: false }, methods: {} }); </script> </body> </html>