vue2 笔记8动画

样例解析

<template>
  <div class="hello">
    <button @click="show1 = !show1">show</button>
    <!-- 使用transition标签，会在动画的对应阶段给包裹的元素添加、删除相应的样式 -->
    <!-- appear 使得元素在创建时就使用动画显示 -->
    <transition appear>
      <h1 v-show="show1">Hello World</h1>
    </transition>
    <button @click="show2 = !show2">show</button>
    <!-- 控制多个元素动画，必须使用transition-group标签，且每个元素必须包含key -->
    <!-- 可用于彼此互斥的多个元素动画控制 -->
    <!-- 通过name属性使用命名前缀的动画样式 -->
    <transition-group name="my-tran">
      <h1 v-show="show2" key="1">Hello World1</h1>
      <h1 v-show="!show2" key="2">Hello World2</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      show1: true,
      show2: true
    }
  }
}
</script>

<style scoped>
/*默认动画*/
/*以过度实现*/
/*进入起点（一瞬间，动画的第一帧）、离开终点激活*/
.v-enter, .v-leave-to {
  transform: translateX(-100%);
}

/*进入终点、离开起点（一瞬间，动画的第一帧）激活*/
.v-enter-to, .v-leave {
  transform: translateX(0);
}

/*进入过程中、离开过程中激活*/
.v-enter-active, .v-leave-active {
  transition: 1s;
}

/*命名动画，样式名前缀v改为对应transition.name*/
/*以动画实现*/
/*进入过程中激活*/
.my-tran-enter-active {
  animation: my-ani 0.5s;
}

/*离开过程中激活*/
.my-tran-leave-active {
  animation: my-ani 0.5s reverse;
}

@keyframes my-ani {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

动画库

Animate.css

• 安装

npm i animate.css

• 使用

<template>
    <button @click="show3 = !show3">show</button>
    <!-- 转换名固定写animate__animated animate__bounce,作为动画样式的前缀-->
    <!-- 动画对应阶段使用对应属性(enter-active-class...)指定的名称作为动画样式的后缀 -->
    <transition
        name="animate__animated animate__bounce"
        appear
        enter-active-class="animate__backInDown"
        leave-active-class="animate__backOutDown"
    >
      <h1 v-show="show3">Hello World</h1>
    </transition>
  </div>
</template>
<script>
  import 'animate.css'
</script>