Vue_2 --- 过度与动画

1. 动画效果

1.1 默认

以滑动效果为例

<template>
    <div>
        <!-- 3. 控制isShow的值,播放来或去的动画 -->
        <button @click="isShow = !isShow">显示/隐藏</button>
        <!-- 2. 使用transition 标签将想要有动画效果的标签包裹起来 -->
        <transition>
            <h1 v-show="isShow">你好啊</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Test",
        data() {
            return {
                isShow: true
            }
        }
    }
</script>

<style scoped>
    h1 {
        background-color: orange;
    }

    /* 1.定义动画效果和类名 */

    /* 定义来的类名,vue中默认是v-enter-active,Vue会自己调用 */
    .v-enter-active {
        /* animation: 播放哪个动画,1s: 1秒完成,linear: 匀速*/
        animation: leftSlide 1s linear;
    }
    
	/* 定义来的类名,vue中默认是v-leave-active,Vue会自己调用 */
    .v-leave-active {
        /* reverse:反转 */
        animation: leftSlide 1s reverse;
    }

    /* keyframes 定义关键帧,leftSlide 动画名 */
    @keyframes leftSlide {
        /* 来的效果 */
        from {
            /* transform: 2D变换, translateX: 横坐标,-100px是左边 */
            transform: translateX(-100%);
        }
        /* 去的效果 */
        to {
            transform: translateX(0px);
        }
    }
</style>

1.2 多个元素多个动画

transition可以有自己的名字,同时 v-enter-active 必须为 名字-enter-active, v-leave-active 必须为 名字-v-leave-active

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="leftSlide">
            <h1 v-show="isShow">你好啊</h1>
        </transition>
    </div>
</template>

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

<style scoped>
    h1 {
        background-color: orange;
    }


    /* 定义来的类名,如果transition有名字必须是 名字-enter-active,Vue会自己调用 */
    .leftSlide-enter-active {
        animation: leftSlide 1s linear;
    }
    
	/* 定义来的类名,如果transition有名字必须是 名字-leave-active,Vue会自己调用 */
    .leftSlide-leave-active {
        animation: leftSlide 1s reverse;
    }

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

1.3 默认有动画效果

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <!-- appear 来控制默认有动画效果或者 :appear="true",注意加冒号,不写appear或者:appear="false"来控制默认没有动画效果-->
        <transition name="leftSlide" appear>
            <h1 v-show="isShow">你好啊</h1>
        </transition>
    </div>
</template>

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

<style scoped>
    h1 {
        background-color: orange;
    }

    .leftSlide-enter-active {
        animation: leftSlide 1s linear;
    }
    .leftSlide-leave-active {
        animation: leftSlide 1s reverse;
    }

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

2. 过度效果

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="leftSlide" appear>
            <h1 v-show="isShow">你好啊</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Test",
        data() {
            return {
                isShow: true
            }
        }
    }
</script>

<style scoped>
    h1 {
        background-color: orange;
        transition: 1s linear;   /* 想让谁变就给谁加持续时间 */
    }

    /* 进入的起点 */
    .leftSlide-enter {
        transform: translateX(-100%);
    }

    /* 进入的终点 */
    .leftSlide-enter-to {
        transform: translateX(0);
    }

    /* 离开的起点,离开和计入的起点终点完全相反 */
    .leftSlide-leave {
        transform: translateX(0);
    }

    /* 离开的终点 */
    .leftSlide-leave-to {
        transform: translateX(-100%);

    }

</style>

简写

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="leftSlide" appear>
            <h1 v-show="isShow">你好啊</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Test",
        data() {
            return {
                isShow: true
            }
        }
    }
</script>

<style scoped>
    h1 {
        background-color: orange;
    }

    /* 进入的起点 */
    .leftSlide-enter, .leftSlide-leave-to {
        transform: translateX(-100%);
    }

     /* 进入和离开过程中,需要激活的动画效果 */
    .leftSlide-enter-active, .leftSlide-leave-active {
        transition: 1s linear;
    }

    /* 进入的终点 */
    .leftSlide-enter-to, .leftSlide-leave {
        transform: translateX(0);
    }

</style>

3. 多元素过度

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <!-- 1. 标签改为 transition-group-->
        <transition-group name="leftSlide" appear>
            <!-- 1.1 多元素,必须有不同的key值,一般会用v-for生成多元素,同时绑定key值 -->
            <h1 v-show="isShow" key="1">你好啊</h1>
            <h1 v-show="isShow" key="2">我也好</h1>
        </transition-group>
    </div>
</template>

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

<style scoped>
    h1 {
        background-color: orange;
    }

    /* 进入的起点 */
    .leftSlide-enter, .leftSlide-leave-to {
        transform: translateX(-100%);
    }

    .leftSlide-enter-active, .leftSlide-leave-active {
        transition: 1s linear; /* 需要激活的动画效果写在这里 */

    }

    /* 进入的终点 */
    .leftSlide-enter-to, .leftSlide-leave {
        transform: translateX(0);
    }

</style>

4. 第三方动画库

4.1 animate

0. 官方网址

https://animate.style/

1. 下载

npm install animate.css

2. 使用

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- 2. 配置名字: 固定为 animate__animated animate__bounce -->
    <!-- 3. 配置进入的动画类名 enter-active-class,官网上的动画类名: animate__rubberBand -->
    <!-- 4. 配置离开的动画类名 leave-active-class,官网上的动画类名: animate__fadeOut -->
    <transition
        name="animate__animated animate__bounce"
        appear
        enter-active-class="animate__rubberBand"
        leave-active-class="animate__fadeOut"
    >
      <h1 v-show="isShow">你好,整个世界!</h1>
    </transition>
  </div>
</template>

<script>
// 1. 引入animate.css
import 'animate.css'

export default {
  name: 'school-info',
  data() {
    return {
      isShow: true
    }
  }
}
</script>

<style>

</style>