嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: yk2012yk2012，微信公众号：ykyk2012]

「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战 (opens new window)」

今天我们主要来学习Vue中的动画与过渡

# 1. vue动画的理解

操作css的trasition或animation

vue会给目标元素添加/移除特定的class

# 2. 基本过渡动画的编码

在目标元素外包裹<transition name="xxx">
定义class样式

指定过渡样式: transition
指定隐藏时的样式: opacity/其它

# 3. 过渡的类名

xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter: 指定隐藏时的样式

# 过渡代码示例

/* 显示/隐藏的过渡效果 */
.xxx-enter-active, .xxx-leave-active{
    transition: opacity 0.5s;
}
/* 隐藏时的样式  */
.xxx-enter, .xxx-leave-to{
    opacity: 0;
}

.move-enter-active {
    transition: all 1s;
}
.move-leave-active {
    transition: all 3s;
}
.move-enter, .move-leave-to {
    opacity: 0;
    transition: translateX(20px);
}

<body>
    <div id="demo1">
        <button @click="isShow=!isShow">过渡1</button>
        <transition name="xxx">
            <p v-show="isShow">YK菌学前端</p>
        </transition>   
    </div>

    <div id="demo2">
        <button @click="isShow=!isShow">过渡2</button>
        <transition name="move">
            <p v-show="isShow">YK菌天天学前端</p>
        </transition>
    </div>

    <script src="../js/vue.js"></script>
    <script>  
        new Vue({
            el: "#demo1",
            data() {
                return {
                    isShow: true
                }
            }
        })

        new Vue({
            el: "#demo2",
            data: {
                isShow:true
            }
        })

    </script>
</body

效果

在这里插入图片描述

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition-group name="hello" appear>
            <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;
    }
    /* 进入的起点、离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    .hello-enter-active,.hello-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点、离开的起点 */
    .hello-enter-to,.hello-leave{
        transform: translateX(0);
    }

</style>

# 动画代码示例

.bounce-enter-active {
    animation: bounce-in .5s;
}
.bounce-leave-active {
    animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scale(0);
        }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

<body>
    <div id="example-2">
        <button @click="show = !show">Toggle show</button><br>
        <transition name="bounce">
          <p v-if="show" style="display: inline-block;">YK菌一直在学前端</p>
        </transition>
      </div>

      <script src="../js/vue.js"></script>
      <script>
        new Vue({
            el: '#example-2',
            data: {
                show: true
            }
        })
      </script>
</body>

在这里插入图片描述

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="hello" 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;
    }

    .hello-enter-active{
        animation: atguigu 0.5s linear;
    }

    .hello-leave-active{
        animation: atguigu 0.5s linear reverse;
    }

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

# 使用第三方动画库

https://animate.style/

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition-group 
            appear
            name="animate__animated animate__bounce" 
            enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"
        >
            <h1 v-show="!isShow" key="1">你好啊！</h1>
            <h1 v-show="isShow" key="2">尚硅谷！</h1>
        </transition-group>
    </div>
</template>

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

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

# 总结

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

写法：

准备好样式：
- 元素进入的样式：
  1. v-enter：进入的起点
  2. v-enter-active：进入过程中
  3. v-enter-to：进入的终点
- 元素离开的样式：
  1. v-leave：离开的起点
  2. v-leave-active：离开过程中
  3. v-leave-to：离开的终点
使用<transition>包裹要过度的元素，并配置name属性：

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

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

最后，欢迎关注我的专栏，和YK菌做好朋友

生命周期过滤器