Vue过渡动画

CSS

• vue自带类
  .v-enter-active{ /* 开始 /
  transition: transform .5s / .5s表示0.5s transform变化
  }
  .v-enter{ /* 开始前 /
  transform: translateX(100%) / 开始x位置
  }
  .v-enter-to{ /* 开始后 /
  transform: translateX(0) / 开始后x位置
  }
  .v-leave-active{ /* 结束 /
  transition: transform .5s / .5s表示0.5s transform变化
  }
  .v-leave{ /* 结束前 /
  transform: translateX(0) / 开始x位置
  }
  .v-leave-to{ /* 结束后 /
  transform: translateX(-100%) / 开始后x位置
  }

使用组件：

<transition>
	图片标签
</transition>