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 {
            width: 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, {
                    width: '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，

此处暂时记一下，

 

posted @ 2017-02-27 11:54  _白马非马  阅读(1692)  评论(0)  编辑  收藏  举报