Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge about how to achieve digital conversion animation in vue. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

The digital part of the UI diagram is as follows:

Emmm . So add the effect of dynamic changes in numbers.

At first, I made a copy directly on the Internet. But some of the functions can not meet the requirements, so, changed parts, perfect implementation

Change part:

1. The number does not need a thousand character, but in order to prevent it from happening in the future, a parameter judgment is added, which is not available by default.

two。 Integer change of number

3. Component is changed to inline element, which is more compatible with page style.

4. The second number change is the accumulation of the last number.

5. Add listeners to prevent pages from being updated

The code is as follows:

0 export default {name:'numberGrow', props: {time: {type: Number, default: 2}, value: {type: Number, default: 0}, thousandSign: {type: Boolean, default: () = > false}}, data () {return {oldValue:0}}, watch: {value:function (value OldValue) {this.numberGrow (this.$refs.numberGrow)}} Methods: {numberGrow (ele) {let _ this = this let value = _ this.value-_ this.oldValue let step = (value * 10) / (_ this.time * 100) let current = 0 let start = _ this.oldValue let t = setInterval (function () {start + = step if (start > _ this.value) {clearInterval (t) Start = _ this.value t = null} if (current = start) {return} current = parseInt (start) _ this.oldValue = current if (_ this.thousandSign) {el [XSS _ clean] = current.toString (). Replace (/ (\ d) (? = (?:\ d {3} [+]?) + $) / g )} else {ele[ XSS _ clean] = current.toString ()}, 10)}}, mounted () {this.numberGrow (this.$refs.numberGrow)}} .number-grow-warp {transform: translateZ (0) }

It's a perfect realization.

The references are as follows:

Import numberGrow from'@ / components/numberGrow/index.vue'export default {name:'monitor', components: {numberGrow}, data () {return {toNowGantryNum:1068319425,}},} these are all the contents of the article "how to realize Digital Transformation Animation in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.