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

时间：2017-02-27 12:54:52 阅读：1574 评论：0 收藏：0 [点我收藏+]

标签：sheet ati height onclick link 例子 .com function indicator

技术分享

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

此处暂时记一下，

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

标签：sheet ati height onclick link 例子 .com function indicator

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行