1. Introduction

Double Eleven is coming, and then the company will make a large electronic display screen, in which the total amount of money needs to scroll the switching effect, similar to this:

2. Think & Implement

2.1 thinking

The transition group in VUE can achieve a similar effect. Let’s take a look at the case effect on the official website:

2.2 implementation

So we first refer to the official website to achieve a simple effect:

Since the project is relatively simple, the CDN method is adopted here, and the code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style> * {margin: 0px; padding: 0px; padding: 0px; } body, html { min-width: 1920px; min-height: 1080px; width: 100%; height: 100%; } #app { position: relative; } .amount { color: gold; font-size: 85px; display: flex; justify-content: center; } .list-enter-active, .list-leave-active { transition: transform 1s ease, opacity 1s ease; } .list-enter-from { opacity: 0; transform: translateY(50%); } .list-leave-to { opacity: 0; transform: translateY(-50%); } </style> <title>Document</title> </head> <body id="app"> <div class="amount"> <div style="display: flex;" <span> <span> <transition-group name="list" tag="p"> <p style="display: inline-block; v-for="(item , index) in todayAmountComputed" :key="item + index"> {{item}}</p> </transition-group> </div> </div> </body> <script src="https://unpkg.com/vue@next" defer></script> <script> document.addEventListener('DOMContentLoaded', () => { Vue.createApp({ data() { return { todayAmount: '0', platformSales1: 4090013, } }, computed: { todayAmountComputed() { return this.todayAmount.split(''); }, }, mounted() { setInterval(() => { if (this.todayAmount === '0') { this.todayAmount = '1000'; } this.todayAmount = '' + Math.floor(Math.random() * 10000); }, 2000); }, }).mount('#app'); }) </script> </html>Copy the code

Now, there is only one step to complete the effect. Now, because the original number will occupy space, the departing and entering are not in the same line. Therefore, we add position:absoulte, and then use left positioning to fix them in a reasonable position, the code is as follows:


<body id="app">
    <div id="amount">
        <div style="display: flex;">
            <span>RMB</span>
            <transition-group name="list" tag="p" style="position: relative;">
                <p style="display: inline-block; position: absolute;" v-for="(item , index) in todayAmountComputed"
                    :style="{ left: index * 50 + 'px', }" :key="item + index">
                    {{item}}</p>
            </transition-group>
        </div>
    </div>
</body>

Copy the code

The following effects should appear:

Whoa, whoa, whoa, whoa, whoa, whoa, whoa, whoa, whoa.

3. Inject your soul

Heh heh heh, and finally to inject soul and add a little delay to each number:

<body id="app">
    <div id="amount">
        <div style="display: flex;">
            <span>RMB</span>
            <transition-group name="list" tag="p" style="position: relative;">
                <p style="display: inline-block; position: absolute;" v-for="(item , index) in todayAmountComputed"
                    :style="{left: index * 50 + 'px', 'transition ': 0.1 * index + 's'}" :key="item + index">
                    {{item}}</p>
            </transition-group>
        </div>
    </div>
</body>
Copy the code

The final effect is as follows:

4. To summarize