Velocity is not defined

来源：5-4 Vue中的 Js 动画与 Velocity.js 的结合

Inuyasha__

2019-06-29

vue.js:634 [Vue warn]: Error in v-on handler: “ReferenceError: Velocity is not defined”

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的JS动画与velocity.js</title>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./velocity.js"></script>
    <link rel="stylesheet" href="animate.css" type="text/css">
</head>
<body>
    <div id="root">
        <transition     
        name="fade"
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter">
            <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()
                {
                    this.show = !this.show
                },
                handleBeforeEnter : function(el)
                {   
                    el.style.opacity = 0;            
                },
                handleEnter : function(el,done)
                {        
                    Velocity(el,{opacity:1},{duration:1000})
                },
                handleAfterEnter :function(el)
                {                   
                }
            }
        
        })
    </script>
</body>
</html>

写回答

1回答