vue过度动画和自定义指令

VUE vue

创建时间:2019-12-03 22:56

字数:288 阅读:

过度动画

过度动画

元素在显示和隐藏时的动态效果，常用的效果都是有css实现

在css中操作transition或animatio达到不同效果
在目标元素添加父级元素 ,通过父元素自动应用class类名达到效果
过滤与动画时，会为元素动态添加相应css
- xxx-enter: 定义显示前的效果
- xxx-enter-active:定义显示过程的效果
- xxx-enter-to: 显示后的效果
- xxx-leave: 隐藏前的效果
- xxx-leave-active: 定义吟唱时的效果
- xxx-leave-to: 隐藏后的效果

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sh-enter-active{
            transition:  5s;
        }
        .sh-leave-active {
            transition:  0.5s;
        }
        .sh-enter, .sh-leave-to{
            opacity: 0;
            transform: translateX(10px);
        }

    </style>
</head>
<body>
    <div id="app">
        <button @click="show = ! show">显示/隐藏</button>
        <transition name="sh">
            <p v-show="show">hello, world</p>
        </transition>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>
</body>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com