海浪Code

Appearance

如何实现动画 ​

用transition包裹需要实现动画的标签 两个Vue指定的类名

  1. v-enter-active
  2. v-leave-active

一个自定义的动画，

如果想让让动画一上来就执行，在transition标签中加appear属性

vue
<transition name="hello" appear>
  <h1 class="title" v-show="isShow">你好啊！</h1>
</transition>
vue
<style scoped>
.title {
  background-color: aquamarine;
}
.hello-enter-active {
  animation: move 1s;
}
.hello-leave-active {
  animation: move 1s reverse;
}
@keyframes move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

第三方库动画库 - animate.css ​

官网：https://animate.style/

安装方法 ​

npm i animate.css

使用方法 ​

第一步引入：

import "animate.css"

第二步配置动画：

vue
<transition
  appear
  name="animate__animated animate__bounce"
  enter-active-class="animate__swing"
  leave-active-class="animate__backOutDown"
>
  <h1 class="title" v-show="isShow">你好啊！</h1>
</transition>