vue2.0 动画

 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>

日常所遇，随手而记。