vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子
第一个动画钩子:@before-enter
<div id='app'>
  <transition
    @before-enter='handleBeforeEnter'
  >
    <div v-if='show'>hello world</div>
  </transition>
  <button @click='handleClick'>切换</button>
</div> <script>
var vm = new Vue({
  el:'#app',
  data:{
    show:true
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    },
    handleBeforeEnter:function(el){
      el.style.color='red'
    }
  }
})
</script>
在vue的transition中,在显示数据前,会自动触发before-enter这个事件,比如上面
第二个动画钩子:@enter
<div id='app'>
  <transition
    @before-enter='handleBeforeEnter'
    @enter='handleEnter'
  >
    <div v-if='show'>hello world</div>
  </transition>
  <button @click='handleClick'>切换</button>
</div>
<script>
var vm = new Vue({
  el:'#app',
  data:{
    show:true
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    },
    handleBeforeEnter:function(el){
      el.style.color='red'
    },
    handleEnter:function(el,done){
      setTimeout(function(){
        el.style.color='green';
        done();
      },2000);
    }
  }
})
</script>
在执行动画的时候,会触发@enter这个事件,我们大部分动画流程都是写在这里吗,这个事件跟@before-enter,有点不一样的地方就是,多了一个参数done,在执行完后,回调一下done(),告诉vue,动画执行完了,vue好执行下一个钩子函数
第三个钩子函数:@after-enter
<div id='app'>
  <transition
    @before-enter='handleBeforeEnter'
    @enter='handleEnter'
    @after-enter='handleAfterEnter'
  >
    <div v-if='show'>hello world</div>
  </transition>
  <button @click='handleClick'>切换</button>
</div> <script>
var vm = new Vue({
  el:'#app',
  data:{
    show:true
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    },
    handleBeforeEnter:function(el){
      el.style.color='red'
    },
    handleEnter:function(el,done){
      setTimeout(function(){
        el.style.color='green';
      },2000);
      setTimeout(function(){
        done();
      },4000)
    },
    handleAfterEnter:function(el){
      el.style.color='black'
    }
  }
})
</script>
@after-enter在动画执行完后的处理
同理,有入场动画,就有出场动画
分别是before-leave,leave,after-leave
有了这些基础后,就可以写更复杂的动画效果了,我们可以引入一个库,叫做velocity.js
http://velocityjs.org/
打开velocity的官网,下载下来到本地

栗子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="./vue.js"></script>
    <script src="../velocity.js"></script>
  </head>
<body>
<div id='app'>
  <transition
    @before-enter='handleBeforeEnter'
    @enter='handleEnter'
    @after-enter='handleAfterEnter'
  >
    <div v-if='show'>hello world</div>
  </transition>
  <button @click='handleClick'>切换</button>
</div> <script>
var vm = new Vue({
  el:'#app',
  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>  
这里就用了Velocity来实现这个动画效果,通过这个可以写出非常酷炫的动画

vue中的js动画与Velocity.js结合的更多相关文章

  1. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  2. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  3. JQuery动画插件Velocity.js发布:更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  4. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  5. vue中可以自定义动画的前缀

    vue中可以自定义动画的前缀1.只需在中加入name属性即可 <transition name="my"> <h6 v-if="flag2"& ...

  6. javascript动画:velocity.js学习

    第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...

  7. vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用

    1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...

  8. vue中使用剪切板插件 clipboard.js

    vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...

  9. 聊聊JS动画库:Velocity.js

    前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...

随机推荐

  1. Problem02 输出素数

    题目:判断101-200之间有多少个素数,并输出所有素数. 程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除,则表明此数不是素数,反之是素数. public class ...

  2. [转]LazyLoad.js及scrollLoading.js

    本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...

  3. vue-cli构建项目在index.html中使用静态文件

    在vue-cli构建的项目中,且使用在移动端,我们希望每一个页面加载时都可以使用flexible.js来适配手机. 那么这个flexible.js被import到每一个组件中就不合适了. 好的方法是直 ...

  4. spring 基础知识复习

    spring是一个分层架构,由 7 个定义良好的模块组成.Spring 模块构建在核心容器之上,核心容器定义了创建.配置和管理 bean 的方式. 组成spring框架的每个模块(或组件)都可单独存在 ...

  5. 设置webstorm的file watch 监视scss文件

    参考:http://blog.founddrama.net/2013/04/watching-compass-files-in-webstorm/ 上面红色划线部分. 特别注意arguments: 像 ...

  6. 解决 eclipse cdt 运行时控制台乱码解决

    1 点击黑色 倒三角 按钮 选择 run configurations 2 2.1 点击new 添加 LANG = en_US 2.2 选择 replace native environment wi ...

  7. 利用nginx的fastcgi_cache模块来做缓存

    nginx不仅有个大家很熟悉的缓存代理后端内容的proxy_cache,还有个被很多人忽视的fastcgi_cache. proxy_cache的作用是缓存后端服务器的内容,可能是任何内容,包括静态的 ...

  8. jQuery源码浅析2–奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  9. Oracle 数据库 导入导出空表解决办法!

    expdp导出:(打开CMD) 先创建(任意盘符):\oracle_data 文件夹 1.sqlplus / as sysdba;2.create or replace directory d_nam ...

  10. Hibernate多对多删除问题的解决

    原出处:http://superleo.iteye.com/blog/154587 Hibernate多对多的例子不少,但仔细一看,大多数都是保存的,删除谈的少,但问题还不少,因此有必须简单测试一下, ...