vue-transition单元素过渡_过渡组件的模式属性有哪些可选-CSDN博客

本文链接：https://blog.csdn.net/qq_46606159/article/details/105032461

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

vue中常见的内置组件：
- transition
- keep-alive ：防止重新渲染。
- router-view
单元素/组件过渡
- css过渡
- css动画
- 结合animate.css动画库
transition组件使用动态绑定 name 的方式实现多组件之间的切换过渡效果,想要实现过渡效果需要配合过渡的css类名:
- name-enter:定义进入过渡的开始状态
- name-enter-active:定义进入活动状态
- name-enter-to:定义进入的结束状态
- name-leave:定义离开过渡的开始状态
- name-leave-active:定义离开的活动状态
- name-leave-to:定义离开的结束状态
transition组件有两种过渡模式：使用 mode属性设置
- in-out：新元素先进入过渡，完成之后当前元素过渡离开，默认模式
- out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
        .kerwinfade-enter-active,
        .kerwinfade-leave-active {
            transition: all 1.5s;
        }

        .kerwinfade-enter,
        .kerwinfade-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }

        .kerwinbounce-enter-active {
            animation: bounce-in .5s;
        }

        .kerwinbounce-leave-active {
            animation: bounce-in .5s reverse;
        }

        @keyframes bounce-in {
            0% {
                opacity: 0;
                transform: translateX(100px);
            }

            100% {
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>

        <transition name="kerwinfade">
            <div v-if="isShow">1111111111111</div>
        </transition>

        <transition name="kerwinbounce">
            <div v-if="isShow">222222222</div>
        </transition>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                isShow: false
            }
        })
    </script>
</body>
</html>