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

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 3
    一文梳理Vue3核心原理
  • 4
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 5
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 6
    新建Vue项目
  • 7
    Vue 报错Failed to mount component: template or render function not defined
  • 8
    [记录] 使用Vue-cli搭建项目教程
  • 9
    Vue3【为什么选择Vue框架、Vue简介 、Vue API 风格 、Vue开发前的准备 、Vue项目目录结构 、模板语法、属性绑定 、 】(一)-全面详解（学习总结---从入门到深化）
  • 10
    Vue小项目01——标签记录器
  • 1
    在Vue中，子组件向父组件传递数据
    72
  • 2
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    95
  • 3
    【vue3】vue3中路由hash与History的设置
    204
  • 4
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1066
  • 5
    【vue】 el-table解决分页不能筛选全部数据的问题
    442
  • 6
    【vue】 vue2 监听滚动条滚动事件
    140
  • 7
    【天地图】vue 天地图 T is not defined
    167
  • 8
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    582
  • 9
    【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
    312
  • 10
    【vue】自定义指令实现 复制、长按、水印 功能
    314

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • JavaScript入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • JavaScript 自学手册文档教程
  • jQuery开发教程

    • 相关电子书

    更多
  • JavaScript 语言在引擎级别的执行过程
  • Python第五讲——关于爬虫如何做js逆向的思路
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    DataWorks售前咨询