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 相关文章推荐
JavaScript随机排序(随即出牌)
Sep 17 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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 insert语法详解
2008/06/07 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP Include文件实例讲解
2019/02/15 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
学生会副主席竞聘书
2014/03/31 职场文书
企业宣传策划方案
2014/05/29 职场文书
优秀团员个人总结
2015/02/26 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
电工实训心得体会
2016/01/14 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL