vue <transition>标签与 animate.style 的使用

最近要做一个可以控制div进行上下左右收缩的组件,所以用到了vue中的transition标签,原本想自己慢慢做动画,发现很麻烦,出了很多bug,例如什么组件套用不能点击,设置z-index又碰到什么父子组件的,动画结束display:none也不起作用什么的,最后想直接用dom元素在js里创建动画,又很麻烦,后面查bug看文档发现了Animate.css 直接在transition标签里的自定义过渡 class可以使用

transition标签基础使用(渐入渐出)

<Transition name="slide-fade"> <p v-if="show">hello</p> </Transition>

/* 进入和离开动画可以使用不同 持续时间和速度曲线。 */ 
.slide-fade-enter-active {
    transition: all 0.3s ease-out; 
    } 
.slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); 
    } 
.slide-fade-enter-from, 
.slide-fade-leave-to {
    transform: translateX(20px); opacity: 0; 
}

效果就是点击这个按钮hello向渐入渐出,不过我发现v-enter-from,v-leave-from的样式设置和自定义过渡 enter-from-class,leave-from-class不起作用,transition标签上写也没提示出来,不知道是不是我创建的是vue2.x项目的原因,这个问题有知道的大佬帮忙解答下

1.`v-enter-from`：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
2.`v-enter-active`：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
3.`v-enter-to`：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 `v-enter-from` 被移除的同时)，在过渡或动画完成之后移除。
4.`v-leave-from`：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
5.`v-leave-active`：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
6.`v-leave-to`：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 `v-leave-from` 被移除的同时)，在过渡或动画完成之后移除

//动画组件代码
<div style="position: relative" v-if="direction==='top'">
  <div style="position: absolute">
    <Transition
        leave-active-class="animate__animated animate__fadeOutUp"
        enter-active-class="animate__animated animate__fadeInDown"
         name="slide-fade">
        <slot v-if="!isShow"></slot>
    </Transition>
  </div>
  <div style="position: absolute;">
    <Transition
        leave-active-class="animate__animated animate__fadeOutUp"
        enter-active-class="animate__animated animate__fadeInDown"
        v-if="direction==='top'" name="slide-fade">
      <div
          @click="changeShowButton"
          v-if="isShow"
          style="background-color: black;position: absolute;top: 0px;cursor: pointer"
          :style="{width:maxWidth+'px',height: publicButtonLength+'px'}">
      </div>
    </Transition>
  </div>
</div>

其中leave-active-class,enter-active-class就是对应的div出现和消失显示的动画,animate__animated animate__fadeOutUp,animate__fadeInDown这个样式就是Animate.css中的样式,分别是向上渐出和向下渐入