vue动画库-Animate.css的使用以及部分问题

vue动画库-Animate.css的使用以及部分问题

Animate.css在vue脚手架中的使用

详情见官网： Animate.css | A cross-browser library of CSS animations.

两种使用方式

1. 在style中使用

    <transition name="slide-fade">
      <div class="box" v-if="show" ></div>
    </transition>

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.slide-fade-enter-active {
  animation: jello 1s;
}
.slide-fade-leave-active {
  animation: jello 1s;
}

注意 ：在style中需要删除animate__jello前面的 animate__

2. 直接在 class类上使用

    <transition>
      <div class="box animate__animated animate__jello" v-if="show" ></div>
    </transition>

注意：