したがって、Vue.jsのトゥイーンプロパティに関する以前の記事を読んだ場合は、おそらくそこにたくさんのコードがあることに気づいたでしょう。 自分のプロジェクト全体に散らばって散らばるのは、それほど単純なことではありません。 では、CSSトランジションを使用するよりも多くのコードを記述する必要がないように、それを抽象化する方法があったとしたらどうでしょうか。 さて、ルークチンワースも同じことを考えていて、vue-mixin-tweenを思いついた。 tween.js を使用し、複雑なトゥイーンコードを任意のコンポーネントに含めることができる単純なミックスインに抽出します。

インストール

# Yarn
$ yarn vue-mixin-tween
# NPM
$ npm install vue-mixin-tween --save

使用法

先に進んで、どこかに数値プロパティを持つ古いコンポーネントにそれを投げてください。 ミックスインは、渡したプロパティ名に基づいて新しいリアクティブプロパティを作成します。 例:myPropmyPropTweenになり、myPropが更新されるたびに更新されます。

<template>
  <div>
    <button @click="addAlligators">Add Some Alligators</button>
    <h2>Number of Alligators: {{ numberOfAlligators }}</h2>
    <!-- You may want to Math.floor() the value first as it is a float. -->
    <h2>Number of Alligators: (Tweened) {{ numberOfAlligatorsTween }}</h2>
  </div>
</template>

<script>
import VueMixinTween from 'vue-mixin-tween';

export default {
  data() {
    return {
      numberOfAlligators: 0
    }
  },

  mixins: [
    // The only required argument is the name of the property to tween.
    // The default duration is 500 milliseconds.
    // The default timing function is TWEEN.Easing.Quadratic.Out
    // We're using a "custom" linear timing function here.
    VueMixinTween('numberOfAlligators', 5000, (pos) => pos)
  ],

  methods: {
    addAlligators() {
      this.numberOfAlligators = 500;
    }
  }
}
</script>

そして、あなたはそれを持っています。 手動で行うよりもはるかに少ないコンポーネントあたりのコードで、期間やタイミング機能をカスタマイズするのは非常に簡単です。 素晴らしい!