vue切换组件动画 / vue-transition过渡动画

transition过渡

文档: https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E8%BF%87%E6%B8%A1
transition标签包裹router-view or 状态切换的标签 才能实现过度动效!!!

v-enter / v-leave: 进入/离开过度的开始状态;
v-enter-to / v-leave-to: 进度/离开过度的结束状态;
v-enter-active / v-leave-active: 进入/离开过度时的生效状态;

提供了以上6个类名 or 使用name自定义transition

    click

           
         
11
     

    click

    

           
                
Lorem ipsum dolor sit amet.
                
no data
        
    
  

---

vue 动画

    click

    

        
                
Lorem ipsum dolor sit amet.
        
    
  

自定义过度类名 & animate.css第三方动画插件结合使用

    click

       //离开时动效

        
22222

    

先引入animate.css

多元素过度

    click

    

          //不添加mode就是同时
                
Lorem ipsum dolor sit amet.
                
no data
        
    
  

---

    click

    

           
                
Lorem ipsum dolor sit amet.
                
no data
        
    
  

---

实际应用

app.vue中设置页面切换全局动画

style

.app-container{
padding-top: 40px;
padding-bottom: 50px;     /*设置导航头与tabbar占据空间,是为了中间显示内容不会隐藏到those的背后*/

overflow-x: hidden;       /*隐藏动画translateX(-100%)多余部分  step3.*/

/* max-width: 600px; */
/* margin: 0 auto; */
}

.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(-100%);
}
.v-enter-active,.v-leave-active{
transition: all 0.2s ease;
}
/* 结合transition使用的过渡切换效果  
  进入和离开时的动画，都是页面向左整个移动整个页面距离
step2.*/