Vue过度动画

1、Vue中要加自定义样式的话，只有一个元素加动画效果用(transition)。多个元素加动画效果用(transition-group)，这标签必须加个Key值。

 

2、Css动画元素样式

// 动画进场
.myheadr-enter-active
{
  // 动画名称：liziteng 动画过渡时间：0.5 动画播放状态：匀速播放（linear）
  animation: liziteng 0.5s linear;
}

// 动画退场
.myheadr-leave-active
{
  animation: liziteng 0.5s linear;
}

// 定义动画 动画名称：liziteng（名字可以随意取）
@keyframes liziteng
{
  from
  {
    transform: translateX(-100%);
  }

  to
  {
    transform: translateX(0px);
  }
}

3、备注：可以使用Vue外部动画元素(animate包)，安装格式：

npm install animate

使用方法参考官方文档：https://animate.style/