一,路由中的动画效果实现
<transition>
运动东西(元素,属性,路由.....);
</transition>
class的定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 --当元素出来(显示)
.fade-leave{} //可不写
.fade-leve-active{} //变化成什么样 --当元素离开(隐藏)
二,路由动画效果使用案例
1,transition 标签包裹的是需要做动画处理的组件
<transition name="fadeIn">
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件! -->
</router-view>
</keep-alive>
</transition>
<transition name="fadeIn">
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件! -->
</router-view>
</transition>
2,css样式
.fadeIn-enter{// 组件显示前的状态
opacity: 0;
}
.fadeIn-enter-active{// 组件显示时的状态
transition: all 0.3s linear;
}
.fadeIn-leave-active{// 组件消失时候的状态
transition: all 0.3s linear;
opacity: 0;
}