Vue学习笔记进阶篇之过渡状态详解


Posted in Javascript onJuly 14, 2017

这两天学习了Vue.js 感觉渡系统这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢,比如:

  1. 数字和运算
  2. 颜色的显示
  3. SVG 节点的位置
  4. 元素的大小和其他的属性

所有的原始数字都被事先存储起来,可以直接转换到数字。做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态。

状态动画和watcher

通过 watcher 我们能监听到任何数值属性的数值更新。可能听起来很抽象,所以让我们先来看看使用 Tweenjs 一个例子。

Js代码中引入:

<script src="https://unpkg.com/tween.js@16.3.4"></script>

示例代码:

<div id="app1">
  <input v-model.number="number" type="number" step="20">
  <p>{{animateNumber}}</p>
</div>
var app1 = new Vue({
  el:'#app1',
  data:{
    number:0,
    animateNumber:0
  },
  watch:{
    number:function (newVal, oldVal) {
      var vm = this
      function animate() {
        if (TWEEN.update()){
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween({tweeningNumber:oldVal})
        .easing(TWEEN.Easing.Quadratic.Out)
        .to({tweeningNumber:newVal}, 500)
        .onUpdate(function () {
          vm.animateNumber = this.tweeningNumber.toFixed(0)
        })
        .onComplete(function () {
          cancelAnimationFrame(animate)
        })
        .start()
      animate()
    }
  }
})

运行结果:

Vue学习笔记进阶篇之过渡状态详解

当你把数值更新时,就会触发动画。这个是一个不错的演示,但是对于不能直接像数字一样存储的值,比如 CSS 中的 color 的值,通过下面的例子我们来通过 Color.js 实现一个例子。

js需要添加以下引用:

<script src="https://unpkg.com/tween.js@16.3.4"></script>
<script src="https://unpkg.com/color-js@1.0.3/color.js"></script>

示例代码:

<div id="app-color">
  <input v-model="colorQuery" @keyup.enter="updateColor" placeholder="Enter a color">
  <button @click="updateColor">Update</button>
  <p>Preview:</p>
  <span :style="{backgroundColor:tweenedCSSColor}" class="color-preview">

  </span>
  <p>{{tweenedCSSColor}}</p>
</div>
var Color = net.brehaut.Color
new Vue({
  el:'#app-color',
  data:{
    colorQuery:'',
    color:{
      red:0,
      green:0,
      blue:0,
      alpha:1
    },
    tweenedColor:{}
  },
  created:function () {
    this.tweenedColor = Object.assign({}, this.color)
  },
  watch:{
    color:function () {
      function animate() {
        if (TWEEN.update()){
          requestAnimationFrame(animate)
        }
      }
      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()
      animate()
    }
  },
  computed:{
    tweenedCSSColor:function () {
      return new Color({
        red:this.tweenedColor.red,
        green:this.tweenedColor.green,
        blue:this.tweenedColor.blue,
        alpha:this.tweenedColor.alpha
      }).toCSS()
    }
  },
  methods:{
    updateColor:function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = ''
    }
  }
})

运行结果:

Vue学习笔记进阶篇之过渡状态详解

通过组件组织过渡

管理太多的状态转换会很快的增加 Vue 实例或者组件的复杂性,幸好很多的动画可以提取到专用的子组件。

我们来将之前的示例改写一下:

<div id="app">
  <input v-model.number="firstNumber" type="number" step="20"> +
  <input v-model.number="secondNumber" type="number" step="20"> =
  {{result}}
  <p>
    <animate-integer :value="firstNumber"></animate-integer> +
    <animate-integer :value="secondNumber"></animate-integer> =
    <animate-integer :value="result"></animate-integer>
  </p>
</div>
Vue.component('animate-integer',{
  template:'<span>{{tweeningValue}}</span>',
  props:{
    value:{
      type:Number,
      required:true
    }
  },
  data:function () {
    return {tweeningValue:0}
  },
  mounted:function () {
    this.tween(0, this.value)
  },
  watch:{
    value:function (newVal, oldVal) {
      this.tween(oldVal, newVal)
    }
  },
  methods:{
    tween:function (startValue, endValue) {
      var vm = this
      function animate() {
        if(TWEEN.update()){
        requestAnimationFrame(animate)
        }
      }
      new TWEEN.Tween({tweeningValue:startValue})
        .to({tweeningValue:endValue}, 500)
        .onUpdate(function () {
          vm.tweeningValue = this.tweeningValue.toFixed(0)
        }).start()
      animate()
    }
  }
})

new Vue({
  el:'#app',
  data:{
    firstNumber:20,
    secondNumber:40
  },
  computed:{
    result:function () {
      return this.firstNumber + this.secondNumber
    }
  }
})

运行结果:

Vue学习笔记进阶篇之过渡状态详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
vue-cli常用设置总结
Feb 24 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 #Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 #Javascript
vue component组件使用方法详解
Jul 14 #Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 #Javascript
Vue filters过滤器的使用方法
Jul 14 #Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 #Javascript
Vue computed计算属性的使用方法
Jul 14 #Javascript
You might like
简单的PHP多图上传小程序代码
2011/07/17 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
js编写简易的计算器
2020/07/29 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python使用sorted排序的方法小结
2017/07/28 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
大门门卫岗位职责
2013/11/30 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
小学优秀班主任材料
2014/12/17 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle