zoukankan html css js c++ java

vue示例之transition-另外发现一个vue(可能的)小bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
    <style>
        /* .hide-leave-active,.hide-enter-active{
             transition: opacity .5s
         }
         .hide-leave-to,.hide-enter{
             opacity: 0
         }*/
        p {
             100px;
            height: 100px;
            background-color: rebeccapurple;
            position: absolute;
            left: 100px;
            top: 100px;
        }

    </style>
</head>
<body>
<div id="div1">
    <button @click="change">点我</button>
    <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
            v-bind:css="false">
        <p v-show="show">hello</p>
    </transition>
</div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#div1',
        data: {
            show: true
        },
        methods: {
             change: function () {
             this.show = !(this.show)
             },
            beforeEnter: function (el) {
                Velocity(el, {
                     '500px',
                    color: 'red',
                    opacity: 0,
                }, {
                    duration: 1100,
                    easing: "swing"
                })
            },
            enter: function (el, done) {
                Velocity(el, {
                    opacity: 1,
                    top: '100px',
                    color: 'blue'
                }, {
                    duration: 1100,
                    easing: "swing",
                });
                Velocity(el, {
                    top: '150px',
                    color: 'blue'
                }, {
                    duration: 1100,
                    easing: "swing",
                    complete: done
                })

            },
            leave: function (el, done) {
                Velocity(el, {
                    top: '200px',
                    color: 'blue',
                    opacity: 0,
                }, {
                    duration: 1100,
                    easing: "swing",
                });
                Velocity(el, {
                    top: '300px',
                    color: 'blue'
                }, {
                    duration: 1100,
                    easing: "swing",
                    complete: done
                })
            }

            /* beforeEnter: function (el) {
             el.style.opacity = 0
             el.style.transformOrigin = 'left'
             },
             enter: function (el, done) {
             Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
             Velocity(el, { fontSize: '1em' }, { complete: done })
             },
             leave: function (el, done) {
             Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
             Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
             Velocity(el, {
             rotateZ: '45deg',
             translateY: '30px',
             translateX: '30px',
             opacity: 0
             }, { complete: done })
             }
             */
        }
    })

</script>
</html>

View Code

另外发现一个vue(可能的)小bug,

就是在切换时候用 v-show 好使。换成v-if则不行，元素的display一直是none.

但是换成官方的例子是可以的 https://vuefe.cn/v2/guide/transitions.html，

此处暂时记一下，

查看全文

相关阅读:
【总结】——Repeater控件详细应用
 【SelfIntroduction in Optional Course】
【软考之后的思考】
打印菱形图案printDiamond
【这是来自Word 2010 的Test】
【30岁前挣够500万】
【总结 CKEditor 和 CKFinder 的配置和使用】
linux压缩(解压缩)命令详解 [转]
关于吞吐量和并发度 [转]
Linux的五个查找命令 [转]

原文地址：https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6473101.html