1 //先来一个简单的入场 2 <template> 3 <div id="box"> 4 <input type="button" value="按钮" @click="toggle"> 5 <transition name="fade"> 6 <div id="div1" v-show="bSign"></div> 7 </transition> 8 </div> 9 </template> 10 <script> 11 export default{ 12 data(){ 13 return{ 14 bSign:true 15 } 16 }, 17 methods:{ 18 toggle(){ 19 this.bSign=!this.bSign; 20 } 21 } 22 } 23 </script> 24 <style> 25 #div1{ 26 100px; 27 height:100px; 28 background: red; 29 } 30 .fade-enter-active,.fade-leave-active{ 31 transition: all .3s ease; 32 opacity: 1; 33 transform: translateX(0px); 34 } 35 .fade-enter,.fade-leave-to{ 36 transform: translateX(10px); 37 opacity: 0; 38 } 39 </style>
再来一个引用animate.css
1 <template> 2 <div id="box"> 3 <input type="button" value="按钮" @click="toggle"> 4 <transition name="fade" enter-active-class="animated zoomInLeft"
leave-active-class="animated zoomOutRight"> 5 <div id="div1" v-show="bSign"></div> 6 </transition> 7 </div> 8 </template> 9 <script> 10 11 export default{ 12 data(){ 13 return{ 14 bSign:true 15 } 16 }, 17 methods:{ 18 toggle(){ 19 this.bSign=!this.bSign; 20 } 21 } 22 } 23 </script> 24 <style> 25 #div1{ 26 100px; 27 height:100px; 28 background: red; 29 margin:80px; 30 } 31 /* .fade-enter-active,.fade-leave-active{ 32 transition: all .3s ease; 33 opacity: 1; 34 transform: translateX(0px); 35 } 36 .fade-enter,.fade-leave-to{ 37 transform: translateX(10px); 38 opacity: 0; 39 } */ 40 </style>