AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2018-08-05 2177
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue 中的 JS 动画与 Velocity.js 的结合通过 JS 钩子添加动画（入场） Vue 中的 JS 动画与 Velocity.

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>

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

          

绑定事件

 <transition name="fade" @before-enter="handleBeforeEnter">

定义事件

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秒）--执行“动画结束”

          

文章标签：
JavaScript
关键词：
JavaScript动画
VUE.js动画
vue JavaScript动画
vue js
VUE.js velocity.js
姜白告
目录
相关文章
你都不懂
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习（一）
VUE 开发——Node.js学习（一）
你都不懂
51 3
疯狂的猿
|
4天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画，js循环动画，简单的画面设计。非常丝滑有意思，欢迎对此代码感兴趣的朋友前来下载参考。
疯狂的猿
15 2
龙大吉
|
12天前
|
JavaScript 前端开发 持续交付
构建现代Web应用：Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展，Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新，为Web应用的构建提供了更多可能。在本篇文章中，我们将探讨Vue.js和Node.js这两大热门技术如何完美结合，构建现代Web应用。
龙大吉
16 4
游客qeoynko2nmbgk
|
2月前
|
JavaScript 前端开发 API
Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示
游客qeoynko2nmbgk
49 8
刘大猫.
|
17天前
|
JavaScript 前端开发 Java
vue2知识点：Vue封装的过度与动画
vue2知识点：Vue封装的过度与动画
刘大猫.
14 0
邹荣乐
|
21天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中，通过vue.config.js配置和nginx配置，实现多个入口文件的实现方法
vue前端开发中，通过vue.config.js配置和nginx配置，实现多个入口文件的实现方法
邹荣乐
107 0
邹荣乐
|
21天前
|
JavaScript
深入解析：JS与Vue中事件委托（事件代理）的高效实现方法
深入解析：JS与Vue中事件委托（事件代理）的高效实现方法
邹荣乐
25 0
游客zi3qmblbcdexu
|
23天前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
游客zi3qmblbcdexu
18 0
kaixin321-44007
|
2月前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
kaixin321-44007
22 2
六卿
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
六卿
41 0
JS配合CSS3实现动画和拖动小星星小Demo