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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
详解puppeteer使用代理
Dec 27 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 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
smarty section简介与用法分析
2008/10/03 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
用python实现的线程池实例代码
2018/01/06 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
python和c语言哪个更适合初学者
2020/06/22 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
internal修饰符起什么作用
2013/12/16 面试题
医学院学生的自我评价分享
2013/11/19 职场文书
个人简历自荐信
2013/12/05 职场文书
大学学习计划书范文
2014/05/02 职场文书
教师一帮一活动总结
2014/07/08 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS