17-VUE的动画与过度

17-VUE的动画与过度

---

1.前言

如果我们想实现这样一个元素的显示与隐藏的动画效果

我们可以通过学过的原生CSS动画通过切换class类选择器实现效果

<template>
<div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <h1 v-show="isShow" class="come">海绵宝宝历险记</h1>
    <!--<h1 v-show="isShow" class="go">海绵宝宝历险记</h1>-->
    </div>
</template>
<script>w
    export default {
        name: "AnTest",
        data(){
            return{
                isShow:true,
            }
        }
    }
</script>
<style scoped>
    h1{
        background-color: orange;
    }

    .come{
        animation: aiguigu 1s;
    }
    .go{
        animation: aiguigu 1s reverse;
    }
    @keyframes aiguigu {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

但是这样手动切换太麻烦，而且如果在JS代码中通过获取元素来切换class实现动画这样的方式不符合Vue尽可能不直接控制DOM元素的编程思想，VUE封装了一定的动画切换和过度的效果

---

2. Vue封装的过度与动画

1).作用：

​ 在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

2).图示：

3).写法：

①.准备好样式：

a·元素进入的样式：

a.v-enter:进入的起点
b.v-enter-active:进入过程中
c.v-enter-to:进入的终点

b·元素离开的样式：

a.v-leave:离开的起点
b.v-leave-.active:离开过程中
c.v-leave-to:离开的终点

②.动画与过度

动画不需要事件触发，过渡需要;过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个

a.动画

使用<transition>包裹要过度的元素，并配置name属性：

<transition name="hello">
    <h1v-show="isShow'">你好啊！</h1>
</transition>

设置name属性后，动画的class类选择器的名称为‘name’-开头

 .hello-enter-active{
    animation: aiguigu 1s;
  }
  .hello-leave-active{
    animation: aiguigu 1s reverse;
  }
  @keyframes aiguigu {
    from{
      transform: translateX(-100%);
    }
    to{
      transform: translateX(0px);
    }
  }

如果不设置name属性，动画的class类选择器的名称为v-开头

 .v-enter-active{
    animation: aiguigu 1s;
  }
  .v-leave-active{
    animation: aiguigu 1s reverse;
  }
  @keyframes aiguigu {
    from{
      transform: translateX(-100%);
    }
    to{
      transform: translateX(0px);
    }
  }

如果需要元素一开始（网页加载完成）就有动画效果，可以添加appear属性

<transition name="hello" appear>
    <h1 v-show="isShow">海绵宝宝历险记</h1>
</transition>

b.过度

<transition-group name="hello" appear>
    <h1 v-show="!isShow" key="1">海绵宝宝历险记</h1>
    <h1 v-show="isShow" key="2">海绵宝宝大冒险</h1>
</transition-group>

 /* 进入的起点,离开的终点 */
  .hello-enter,.hello-leave-to{
    transform: translateX(-100%);
  }
  /* 进入的终点,离开的起点 */
  .hello-enter-to,.hello-leave{
    transform: translateX(0);
  }
  .hello-enter-active,.hello-leave-active{
    transition: 0.5s linear;
  }

③.

备注：若有多个元素需要过度，则需要使用：<transition-group>,且每个元素都要指定key值。

<transition-group name="hello" appear>
    <h1 v-show="!isShow" key="1">海绵宝宝历险记</h1>
    <h1 v-show="isShow" key="2">海绵宝宝大冒险</h1>
</transition-group>

4).引入第三方动画库