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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
Highcharts学习之数据列
Aug 03 Javascript
JavaScript函数基础详解
Feb 03 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
Openlayers绘制地图标注
Sep 28 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
初品cakephp 入门基础
2012/02/16 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
express框架下使用session的方法
2019/07/31 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python绘制简单折线图代码示例
2017/12/19 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
python 6行代码制作月历生成器
2020/09/18 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
新学期开学寄语
2014/01/18 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
求职信模板
2014/05/23 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
大学班干部竞选稿
2015/11/20 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
vue3中provide && inject的使用
2021/07/01 Vue.js
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS