<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Animation</title> <Scripttype= "Text/javascript"src= "Vue.js"></Script> <Linkrel= "stylesheet"type= "Text/css"href= "Animate.css"> <styletype= "Text/css">P{width:300px;Height:300px;background:Red;margin:10px Auto; } </style> <Scripttype= "Text/javascript">window.onload= function(){ varapp= NewVue ({el:'#box', data:{Show:false } }) } </Script></Head><Body> <DivID= "box"> <!--control the value of data toggle Show hidden - <Button@click= "Show=!show">Transition</Button> <!--<transition enter-active-class= "Zoominleft" leave-active-class= "Zoomoutright" > <p v-show= "Show" C lass= "animated" ></p> </transition> - <!--The second method of - <!--<transition enter-active-class= "animated Zoominleft" leave-active-class= "animated zoomOutRight" > < ;p v-show= "Show" ></p> </transition> - <!--Multi-element motion - <Transition-groupEnter-active-class= "Zoominleft"Leave-active-class= "Zoomoutright"> <PV-show= "Show"class= "animated": Key= "1"></P> <PV-show= "Show"class= "animated": Key= "2"></P> </Transition-group> </Div></Body></HTML>
Vue transitions and animate.css used together