transition单元素过渡

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

单元素/组件过渡
- css过渡
- css动画
- 结合animate.css动画库

<!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>

@Tiramisu

发布了20 篇原创文章 · 获赞 0 · 访问量 88

私信关注

transition单元素过渡

猜你喜欢