Vue.js 状态过渡-白红宇

Vue.js 状态过渡

阅读量：2118 次

发布时间：2019-04-30

本文共 3543 字，大约阅读时间需要 11 分钟。

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

数字和运算

颜色的显示

SVG 节点的位置

元素的大小和其他的属性

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

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


         
          
        {
      { animatedNumber }}

new Vue({  el: '#animated-number-demo',  data: {    number: 0,    tweenedNumber: 0  },  computed: {    animatedNumber: function() {      return this.tweenedNumber.toFixed(0);    }  },  watch: {    number: function(newValue) {      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });    }  }})

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


         
          
          
        Preview:
  
          
        {
      { tweenedCSSColor }}

var Color = net.brehaut.Colornew Vue({  el: '#example-7',  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 = ''    }  }})

.example-7-color-preview {  display: inline-block;  width: 50px;  height: 50px;}

Update

Preview:

#000000

就像 Vue 的过渡组件一样，数据背后状态过渡会实时更新，这对于原型设计十分有用。当你修改一些变量，即使是一个简单的 SVG 多边形也可实现很多难以想象的效果。

Sides: 10Minimum Radius: 50%Update Interval: 500 milliseconds

上述 demo 背后的代码可以通过进行详阅。

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

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


         
         +  
         =  {
      { result }}  
            
          +    
          =

// 这种复杂的补间动画逻辑可以被复用// 任何整数都可以执行动画// 组件化使我们的界面十分清晰// 可以支持更多更复杂的动态过渡// 策略。Vue.component('animated-integer', {  template: '{
      { tweeningValue }}',  props: {    value: {      type: Number,      required: true    }  },  data: function () {    return {      tweeningValue: 0    }  },  watch: {    value: function (newValue, oldValue) {      this.tween(oldValue, newValue)    }  },  mounted: function () {    this.tween(0, this.value)  },  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 (object) {          vm.tweeningValue = object.tweeningValue.toFixed(0)        })        .start()      animate()    }  }})// 所有的复杂度都已经从 Vue 的主实例中移除！new Vue({  el: '#example-8',  data: {    firstNumber: 20,    secondNumber: 40  },  computed: {    result: function () {      return this.firstNumber + this.secondNumber    }  }})

+ = 60

20 + 40 = 60

我们能在组件中结合使用这一节讲到各种过渡策略和 Vue 。总之，对于完成各种过渡动效几乎没有阻碍。

只要一个动画，就可以带来生命。不幸的是，当设计师创建图标、logo 和吉祥物的时候，他们交付的通常都是图片或静态的 SVG。所以，虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 logo 类似于生灵，它们看上去实际上并不是活着的。

Vue 可以帮到你。因为 SVG 的本质是数据，我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画，来制作你的欢迎页面、加载指示、以及更加带有情感的提示。

Sarah Drasner 展示了下面这个 demo，这个 demo 结合了时间和交互相关的状态改变：

from:

转载地址：http://qzwrf.baihongyu.com/

你可能感兴趣的文章