当前位置 > it书童 > vue > 正文

vue 中的 js 动画与 velocity.js 的结合

vue it书童 2020-01-10 22:44:40 0赞 0踩 314阅读 0评论

前文是用 css 动画

通过 js 钩子函数实现动画

入场动画

<div id="app">
<!--    动画钩子 before-enter enter-->
    <div class="container mt-5">
        <transition
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
            <div v-show="show">hello world</div>
        </transition>
        <button @click="handleClick" class="btn btn-success">切换</button>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClick: function () {
                this.show = !this.show
            },
            handleBeforeEnter: function (el) {
                console.log('beforeEnter')
                el.style.color = 'red'
            },
            handleEnter: function (el, done) {
                setTimeout(() => {
                    el.style.color = 'green'
                }, 2000)
                setTimeout(() => {
                    // 当 done() 调用后会触发 after-enter 钩子
                    done()
                }, 4000)
            },
            handleAfterEnter: function(el) {
                el.style.color = 'yellow'
            }
        }
    })
</script>

出场动画只需将 enter 改成 leave 即可

http://velocityjs.org/

引入 velocity

<script src="https://cdn.staticfile.org/velocity/2.0.5/velocity.min.js"></script>
<div id="app">
    <div class="container mt-5">
        <transition
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
            <div v-show="show">hello world</div>
        </transition>
        <button @click="handleClick" class="btn btn-success">切换</button>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClick: function () {
                this.show = !this.show
            },
            handleBeforeEnter: function (el) {
                el.style.opacity = '0'
            },
            handleEnter: function (el, done) {
                Velocity(el, {opacity: 1}, {duration: 1000, complete:done})
            },
            handleAfterEnter: function(el) {
                console.log('动画结束')
            }
        }
    })
</script>
转载须注明出处:https://www.itshutong.com/articles/388/the-combination-of-js-animation-and-velocityjs-in-vue
标签: 讲义
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录