[Vue + typescript] 숫자 tween

VUE.JS 목록

 

$ npm install gsap

 

AnimationTween.vue

<template>
  <span>{{ displayValue }}</span>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import gsap from 'gsap'

@Component
export default class AnimationTween extends Vue {
  @Prop({ required: true, default: 0 }) value?: number;

  displayValue = 0
  tweenValue = 0

  mounted () {
    this.displayValue = this.value || 0
    this.tweenValue = this.value || 0
  }

  @Watch('value')
  tween () {
    gsap.to(this, {
      tweenValue: this.value,
      onUpdate: () => {
        this.displayValue = Math.ceil(this.tweenValue || 0)
      }
    })
  }
}
</script>

 

 

 

Hello.vue

<template>
  <div>
    <animation-tween :value="firstNumber"></animation-tween>
    <input type="text" v-model="firstNumber">
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import AnimationTween from '@/components/AnimationTween.vue'

@Component({
  components: {
    AnimationTween
  }
})
export default class Hello extends Vue {
  
}

</script>

 

 

VUE.JS 목록