vue动画效果-定义动画帧&过度效果&集成第三方动画animate.css

1.定义动画帧

<template>
  <div>
      <button @click="isShow=!isShow">显示/隐藏</button>
    <!-- //   :appear="true"表示加载即带有动画效果 -->
      <transition :appear="true">
      <div class="st" v-show="isShow">
            <h2>学生姓名：{{name}}</h2>
            <h2>学生性别：{{sex}}</h2>
      </div>

      </transition>
      <!-- 也可以自己设置名字 -->
      <transition name="hello" :appear="true">
          <h2 class="hi" v-show="isShow">你好</h2>
      </transition>
  </div>
</template>

<script>
export default {
    data() {
        return {
            name:"张三",
            sex:"男",
            isShow:true
        }
    }
}
</script>

<style scoped>
.st{
    background-color: aqua;
}
.hi{
    background-color: blanchedalmond;
}
/* 定义一个动画帧 */
@keyframes stu {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0px);
    }
}
/* 不命名固定格式 */
.v-enter-active{
    animation: stu 1s;
}
.v-leave-active{
    /* 反转 */
    animation: stu 1s reverse;
}

/* 自己命名固定格式 */
.hello-enter-active{
    /* linear匀速 */
    animation: stu 1s linear;
}
.hello-leave-active{
    /* 反转 */
    animation: stu 1s reverse;
}
</style>

2.过度效果

<template>
  <div>
      <button @click="isShow=!isShow">显示/隐藏</button>
      <transition-group :appear="true">
          <h2 v-show="isShow" key="1">学校</h2>
          <h2 v-show="isShow" key="2">清华</h2>
      </transition-group>
  </div>
</template>

<script>
export default {
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style scoped>
    h2{
        background-color: chartreuse;
    }
    /* 进入的起点 */ /* 离开的终点 */
    .v-enter,.v-leave-to{
        transform: translateX(-100%);
    }
    /* 进入的终点 *//* 离开的起点 */
    .v-enter-to,.v-leave{
        transform: translateX(0);
    }
    .v-enter-active,.v-leave-active{
        transition: 1s linear;
    }
</style>

3.集成第三方动画animate.css

*npm第三方动画库：npm官网下搜索animate.css

进入主页面：

 

*安装第三方库：npm install animate.css

*引入：import 'animate.css'

*使用：

1.引入类名：name="animate__animated animate__bounce"

   2.添加进入动画：enter-active-class="animate__swing"

3.添加离开动画：

leave-active-class=” animate__bounceOutDown”

 

<template>
  <div>
      <button @click="isShow=!isShow">显示/隐藏</button>

            <!-- 引入类名：name="animate__animated animate__bounce" -->
            <!-- 去库里选一个进入的动画 -->
            <!-- 选离开的动画 -->
      <transition :appear="true"
      name="animate__animated animate__bounce" 
      enter-active-class="animate__swing"
      leave-active-class="animate__bounceOutDown">
        <h2 v-show="isShow">集成第三方动画</h2>
      </transition>
  </div>
</template>

<script>
import 'animate.css'
export default {
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style scoped>
    h2{
        background-color: deeppink;
    }
</style>