vue

Vue学习笔记（十八）之Vue中的JS动画与Velocity.js的结合

Posted by weite122 on 2018-09-21

JavaScript 钩子

  • 通过JavaScript提供的钩子，我们也可以实现动画效果。可以在属性中声明JavaScript的钩子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:enter-cancelled="enterCancelled"

    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
    v-on:leave-cancelled="leaveCancelled"
    >
    <!-- ... -->
    </transition>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    // ...
    methods: {
        // --------
        // 进入中
        // --------

        beforeEnter: function (el) {
            // ...
        },
        // 当与 CSS 结合使用时
        // 回调函数 done 是可选的
        enter: function (el, done) {
            // ...
            done()
        },
        afterEnter: function (el) {
            // ...
        },
        enterCancelled: function (el) {
            // ...
        },

        // --------
        // 离开时
        // --------

        beforeLeave: function (el) {
            // ...
        },
        // 当与 CSS 结合使用时
        // 回调函数 done 是可选的
        leave: function (el, done) {
            // ...
            done()
        },
        afterLeave: function (el) {
            // ...
        },
        // leaveCancelled 只用于 v-show 中
        leaveCancelled: function (el) {
            // ...
        }
    }

  • 这些钩子函数可以结合CSS transitions/animations 使用，也可以单独使用。

  • 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

  • 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

Demo

  • 效果
  • 代码： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的JS动画与Velocity.js的结合</title>
        <script src="http://vuejs.org/js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <transition
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="hanldeAfterEnter"
            >
                <div v-show="show">Hello World</div>
            </transition>
            <button @click="handleClick">Toggle</button>
        </div>
        <script>
            var vm = new Vue({
                el: '#root',
                data: {
                    show: true
                },
                methods: {
                    handleClick: function () {
                        this.show = !this.show
                    },
                    handleBeforeEnter: function (el) {
                        el.textContent = 'beforeEnter'
                    },
                    handleEnter: function (el, done) {
                        setTimeout(() => {
                            el.textContent = 'Enter'
                            done()
                        }, 2000)
                    },
                    hanldeAfterEnter: function (el) {
                        setTimeout(() => {
                            el.textContent = 'AfterEnter'
                        }, 2000)
                    }
                }
            })
        </script>
    </body>
    </html>

使用Velocity.js实现动画效果

  • 效果

  • 代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的JS动画与Velocity.js的结合</title>
        <script src="http://vuejs.org/js/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    </head>
    <body>
        <div id="root">
            <transition
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="hanldeAfterEnter"
                :css="false"
            >
                <div v-show="show">Hello World</div>
            </transition>
            <button @click="handleClick">Toggle</button>
        </div>
        <script>
            var vm = new Vue({
                el: '#root',
                data: {
                    show: true
                },
                methods: {
                    handleClick: function () {
                        this.show = !this.show
                    },
                    handleBeforeEnter: function (el) {
                        el.style.opacity = 0
                        el.style.transformOrigin = 'left'
                    },
                    handleEnter: function (el, done) {
                        el.textContent = 'Animation Start'
                        Velocity(el, {opacity: 1, fontSize: '1.5em'}, {duration: '300'})
                        Velocity(el, {fontSize: '1em'}, {complete: done})
                    },
                    hanldeAfterEnter: function (el) {
                        el.textContent = 'Animation End'
                    }
                }
            })
        </script>
    </body>
    </html>

  • 更多关于Velocity.js可以参考官方文档，或者中文文档

FEATURED TAGS
vue
FRIENDS