vue中的动画效果与过渡效果

目录

一、动画效果

1、过程：

2、注意：

二、过渡效果

三、多个元素过度

四、第三方css库

---

动画与过渡效果添加的六个属性：

1、v-enter-active：进入的整个过程都能响应的样式

2、v-leave-active：离开的整个过程都能响应的样式

3、v-enter：进入的起点

4、v-leave：离开的起点

5、v-enter-on：进入的终点

6、v-leave-on：离开的终点

一、动画效果

1、过程：

①、首先使用transition标签包裹需要设置动画效果的标签；

②、使用@keyframes设置动画的效果，使用v-enter-active和v-leave-active设置动画的进场与退场；

2、注意：

①、transition标签与template标签类似，最后加载显示页面的时候会消失；

②、可以给transition标签设置name属性，通过name名-enter-active和name名-leave-active实现特定name名的特定样式；

③、可以给transition标签设置appear属性，实现初始化马上执行一次；

Test.vue

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- transition包裹着实现动画效果 -->
    <!-- 如果给transition加了名字name='hello'，就不能使用v-enter-active，就必须使用hello-enter-active -->
    <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 1s;
    }
    .hello-leave-active{
        animation: atguigu 1s reverse;
    }
    @keyframes atguigu {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

App.vue

<template>
    <div>
        <Test />
    </div>
</template>

<script>
    import Test from './components/Test.vue'
    

    export default {
        name:'App',
        components:{Test},
        
    }
</script>

二、过渡效果

Test2.vue

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- transition包裹着实现动画效果 -->
    <!-- 如果给transition加了名字name='hello'，就不能使用v-enter-active，就必须使用hello-enter-active -->
    <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,.hello-leave-active{
        transition: 1s;
    }

    /* 进入的起点、离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }

    /* 进入的终点、离开的起点 */
    .hello-enter-to,.hello-leave{
        transform: translateX(0);
    }
</style>

App.vue

<template>
    <div>
        <Test />
        <test2 />
    </div>
</template>

<script>
    import Test from './components/Test.vue'
    import Test2 from './components/Test2.vue'
    

    export default {
        name:'App',
        components:{Test,Test2},
        
    }
</script>

三、多个元素过度

使用transition-group标签，需要使用key标签单独标志每一个元素；

<transition-group name="hello" appear>
        <h1 v-show="!isShow" key="1">你好啊！</h1>
        <h1 v-show="isShow" key="2">尚硅谷！</h1>
</transition-group>

四、第三方css库

Animate.css | A cross-browser library of CSS animations.

import 'animate.css'

<transition-group 
        appear
        name="animate__animated animate__bounce" 

        enter-active-class="animate__animated animate__bounce"
        leave-active-class="animate__backOutUp"
    >
        <h1 v-show="isShow" key="1">你好啊！</h1>
        <h1 v-show="isShow" key="2">尚硅谷！</h1>
    </transition-group>