2x1 精读Vue官方文档 - 状态过度

Mottle
893 阅读2分钟

精读 Vue 官方文档系列 🎉

状态过渡

状态就是数据，它包含了数值、颜色值、属性值等等，所以状态过渡指的就是数据本身的过渡动效。

Vue 推荐通过 “数据驱动，响应式更新” 的方式来实现状态过渡。其主要思路就是将一个状态转换为一个响应式变量，然后利用一些动态库去更新这个响应式变量，从而驱动 Vue 的响应式更新，实现过渡的动态效果。

“状态过渡” 与 Vue 的内建的过渡系统最根本区别在于前者是面向数据的变化，而后者是基于状态变更来对元素、组件或列表应用由CSS或JS提供的动画。内建过渡系统封装了大量的逻辑判断并且对外暴露多种不同状态变更时的钩子，以供使用者灵活应用。

数值的过渡

可以通过 gsap.js 这个库结合侦听器来实现：状态动画与侦听器

这个是 gsap 官网：greensock.com/

颜色的过渡

可以通过 tween.js 与 color-js 这两个库结合侦听器来实现：状态动画与侦听器

属性值过渡

以 SVG 为例，当其属性与Vue响应式变量进行绑定式，修改响应式变量的值便可以实现实时的状态过渡。 动态状态过渡

把过渡放到组件里

为了减轻 Vue 实例或组件因管理过多的状态过渡而导致的复杂度增加，我们建议一个过渡状态对应一个独的立组件，这个状态过渡组件会对外提供一个口子，用来接收状态的起始，然后内部实现整个过渡变化效果。

Vue.component("animated-integer", {
    template: "<span>{{ tweeningValue }}</span>",
    props: {
      value: {
        type: Number,
        required: true,
      },
    },
    data: function () {
      return {
        tweeningValue: 0,
      };
    },
    watch: {},
    mounted: function () {
      this.tween(0, this.value);
    },
    methods: {},
  },
});

然后使用到的地方，引入这个数值状态过渡组件即可。

<animated-integer value="result" />

赋予设计以生命

状态过渡的本质是数据的变化，设计产物的载体也是“数据”，而赋予“数据”以生命，唯一的限制是你的想象力。

avatar
文章
阅读
粉丝