问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

VueJs - 动画数字变化

社区维基
1
新手上路，请多包涵

我正在寻找使用 VueJs 动画数字变化。

例如我有：

 {{ number }}

Then number changes from 0 to 100 , I would like the element to count up to 100 rather than just jumping stright to it.

如果不使用除 VueJs 之外的任何第三方（纯 Js/VueJs），我将如何做到这一点？

原文由 Ricky Barnett 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptanimationvue.js
阅读 627
2 个回答
得票最新
社区维基
1
✓ 已被采纳

让它作为自定义组件工作： https ://jsfiddle.net/5nobcLq0/5/

网页格式

<body>
  <input v-model="number">
  <animated-number :number="number"></animated-number>
</body>

js

 Vue.component('animated-number', {

  template:"{{ displayNumber }}",
  props: {'number': { default:0 }},

  data () {
    return {
      displayNumber:0,
      interval:false
    }
  },

  ready () {
    this.displayNumber = this.number ? this.number : 0;
  },

  watch: {
    number () {
      clearInterval(this.interval);

      if(this.number == this.displayNumber) {
        return;
      }

      this.interval = window.setInterval(() => {
        if(this.displayNumber != this.number) {
          var change = (this.number - this.displayNumber) / 10;
          change = change >= 0 ? Math.ceil(change) : Math.floor(change);
          this.displayNumber = this.displayNumber + change;
        }
      }, 20);
    }
  }
})

new Vue({
  el:'body',
});

原文由 Jeff 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

我意识到这是一篇较旧的帖子，但我一直在寻找类似的东西，并且我直接从 vue.js 2.0 文档中找到了一个示例。你可以在这里找到它： https ://v2.vuejs.org/v2/guide/transitioning-state.html#Organizing-Transitions-into-Components

我在下面的代码片段中重新创建了它。

 // This complex tweening logic can now be reused between
// any integers we may wish to animate in our application.
// Components also offer a clean interface for configuring
// more dynamic transitions and complex transition
// strategies.
Vue.component('animated-integer', {
  template: '<span>{{ tweeningValue }}</span>',
  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() {
          vm.tweeningValue = this.tweeningValue.toFixed(0)
        })
        .start()
      animate()
    }
  }
})
// All complexity has now been removed from the main Vue instance!
new Vue({
  el: '#example-8',
  data: {
    firstNumber: 20,
    secondNumber: 40
  },
  computed: {
    result: function() {
      return this.firstNumber + this.secondNumber
    }
  }
})

 <script src="https://cdn.jsdelivr.net/npm/vue@2.4.3/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tween.js"></script>
<div id="example-8">
  <input v-model.number="firstNumber" type="number" step="20"> +
  <input v-model.number="secondNumber" type="number" step="20"> = {{ result }}
  <p>
    <animated-integer v-bind:value="firstNumber"></animated-integer> +
    <animated-integer v-bind:value="secondNumber"></animated-integer> =
    <animated-integer v-bind:value="result"></animated-integer>
  </p>
</div>

希望对您有所帮助！蒂姆

原文由 Tim 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题