JavaScript 钩子

Posted gongshunfeng91

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 钩子相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src="vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    </head>
    <body>
        <div>
        <h1>--javascript 钩子--</h1>
        <div id="example1">
            <button @click="show = !show">Toggle</button>
            <transition
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:leave="leave"
                v-bind:css="false"
            >
                <p v-if="show">Demo</p>
            </transition>
        </div>
        <script>
        // Vue 根实例
        var example1 = new Vue(
            el: ‘#example1‘,
            data: 
                show: false
            ,
            methods: 
                beforeEnter: function (el) 
                    el.style.opacity = 0
                    el.style.transformOrigin = ‘left‘
                ,
                enter: function (el, done) 
                    Velocity(el,  opacity: 1, fontSeze: ‘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‘,
                        translateX: ‘30px‘,
                        translateX: ‘30px‘,
                        opacity: 0
                    ,  complete: done)
                ,
            
        )
        </script>
        </div>        
    </body>
</html>

技术图片

以上是关于JavaScript 钩子的主要内容，如果未能解决你的问题，请参考以下文章

javascript 钩子很简单

javascript facetwp /加载钩子

javascript facetwp /加载钩子

JavaScript 钩子

vue过渡效果之--javascript钩子

VUE动画Javascript钩子不生效问题记录