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 单选框,多选框美化代码
Aug 01 Javascript
一个网马的tips实现分析
Nov 28 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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
解析dedeCMS验证码的实现代码
2013/06/07 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
php分页函数示例代码分享
2014/02/24 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
python 输出上个月的月末日期实例
2018/04/11 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
python 并发下载器实现方法示例
2019/11/22 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
暑假实习求职信范文
2013/09/22 职场文书
高中体育教学反思
2014/01/29 职场文书
人事任命书范文
2014/06/04 职场文书
学雷锋宣传标语
2014/06/25 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
交通安全学习心得体会
2016/01/18 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python