初识 Vue（25）---（ Vue 中的 JS 动画与 Velocity.js 的结合）

本文链接：https://blog.csdn.net/jianghao233/article/details/81433849

Vue 中的 JS 动画与 Velocity.js 的结合

通过 JS 钩子添加动画（入场）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='root'>
      <transition name="fade" @before-enter="handleBeforeEnter">
        <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(){
                console.log('beforeEnter')
            }
        }
       })
    </script>   
</body>
</html>

输出：点击---隐藏---点击---出现

绑定事件

定义事件

methods:{
            handleClick:function(){
                this.show = !this.show

            },
            handleBeforeEnter:function(){
                console.log('beforeEnter')
            }
        }

添加动画钩子（@before-enter="handleBeforeEnter"）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='root'>
      <transition name="fade" @before-enter="handleBeforeEnter">
        <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.color = 'red'
            }
        }
       })
    </script>   
</body>
</html>

输出：点击---隐藏---点击---出现（红色）

重新定义事件

  methods:{
            handleClick:function(){
                this.show = !this.show

            },
            handleBeforeEnter:function(el){
                el.style.color = 'red'
            }
        }

添加动画钩子（@enter="handleEnter"）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='root'>
      <transition name="fade" 
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      >
        <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.color = 'red'
            },
            handleEnter:function(el,done){
                setTimeout(()=>{
                   el.style.color = 'green'
                    done()
                },2000)
            }
        }
       })
    </script>   
</body>
</html>

输出：点击---隐藏---点击---出现（红色）--2秒后绿色（通过JS实现动画效果）

重新定义事件（done():手动告诉 vue ，回调函数已经执行完毕）

methods:{
            handleClick:function(){
                this.show = !this.show

            },
            handleBeforeEnter:function(el){
                el.style.color = 'red'
            },
            handleEnter:function(el,done){
                setTimeout(()=>{
                   el.style.color = 'green'
                   done()
                },2000)
            }
        }

添加动画钩子（@enter="handleEnter"）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
    <script src = './vue.js'></script>
</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:function(){
                this.show = !this.show

            },
            handleBeforeEnter:function(el){
                el.style.color = 'red'
            },
            handleEnter:function(el,done){
                setTimeout(()=>{
                   el.style.color = 'green'
                   
                },2000)
                    setTimeout(()=> {
                        done()
                    },4000)
            },
            handleAfterEnter:function(el){
                el.style.color = 'yellow'
            }
        }
       })
    </script>   
</body>
</html>

输出：点击---隐藏---点击---出现（红色）--2秒后绿色--再2秒黄色（通过JS实现动画效果）

重新定义事件（给done()添加定时器）

methods:{
            handleClick:function(){
                this.show = !this.show

            },
            handleBeforeEnter:function(el){
                el.style.color = 'red'
            },
            handleEnter:function(el,done){
                setTimeout(()=>{
                   el.style.color = 'green'
                   
                },2000)
                    setTimeout(()=> {
                        done()
                    },4000)
            },
            handleAfterEnter:function(el){
                el.style.color = 'yellow'
            }
        }

总结：入场动画钩子：@before-enter="handleBeforeEnter" / @enter="handleEnter" / @after-enter="handleAfterEnter"

出场动画钩子：@before-leave="handleBeforeLeave" / @enter="handleLeave" / @after-leave="handleAfterLeave"

与 Velocity.js 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
    <script src = './vue.js'></script>
    <script src = './velocity.js'></script>
</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: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>   
</body>
</html>

输出：点击---隐藏---逐渐出现（1秒）--执行“动画结束”