Vue官方文档(32):状态动画示例

npm install [email protected]
npm install [email protected]      

<template>



  <div >

<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>

<div id="example-7">
  <input
    v-model="colorQuery"
    v-on:keyup.enter="updateColor"
    placeholder="Enter a color"
  >
  <button v-on:click="updateColor">Update</button>
  <p>Preview:</p>
  <span
    v-bind:style="{ backgroundColor: tweenedCSSColor }"
    class="example-7-color-preview"
  ></span>
  <p>{{ tweenedCSSColor }}</p>
</div>


 </div>


</template>


 <script>
 
 //import Vue from 'vue'
 import gsap from 'gsap'
 import Color from 'color-js'
 import TWEEN from 'tween.js'
 
 



  export default{
  components: {

  },
    data() {
      return {
        show: true,
        number: 0,
    tweenedNumber: 0,

        colorQuery: '',
    color: {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    },
    tweenedColor: {}

              }
            },
    methods:{
          updateColor: function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = ''
    }


      
    },
    created(){
      this.tweenedColor = Object.assign({}, this.color)
    },
    computed: {
      animatedNumber: function(){
        return this.tweenedNumber.toFixed(0);
      },
        tweenedCSSColor: function () {
      return new Color({
        red: this.tweenedColor.red,
        green: this.tweenedColor.green,
        blue: this.tweenedColor.blue,
        alpha: this.tweenedColor.alpha
      }).toCSS()
    }
    },
     watch: {
    number: function(newValue) {
      gsap.to(this.$data, { duration: 3.5, tweenedNumber: newValue });
    },
        color: function () {
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()

      animate()
    }
  }
  }
      
    </script>

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

  

</style>