vue 内置动画组件 transition介绍

vue官方介绍

vue的内置组件，可以给任意元素包裹并且添加离开进入的动画效果，官方文档已经介绍的很详细了，这里就简单举个例子
在routerView中用transition包裹，实现页面切换动画效果

<transition name="fade-transform" mode="out-in">
	<router-view></router-view>
</transition>

动画样式

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}