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

The main content of this article is to explain "vue how to achieve flipping animation", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vue how to achieve flipping animation" bar!

Application scenario

Commonly used in large-screen order quantity display

Principle

Using css writing-mode: vertical-rl to arrange numbers vertically

Use css transform to make Digital Scroll

Realization idea

Let the numbers be arranged vertically according to css, setting a total of 8 columns

According to the value passed by the component, if it is less than 8 digits, the zero is filled recursively.

After zero padding, the loop views the animation according to translate (- 50%,-${numberArr [index] * 10}%).

0123456789 {item}} export default {name: "hChartNum", props: {num: {type:Number, default:1123}}, data () {return {orderNum: ['0'' '0orders,' 0orders, '0orders,' 0orders, '0orders,' 0orders, / / default order totals}}, mounted () {setTimeout (() = > {this.toOrderNum (this.num) / / enter numbers here) }, methods: {/ / set text scrolling setNumberTransform () {const numberItems = this.$refs.numberItem / / get the ref of the number, calculate the number of elements const numberArr = this.orderNum.filter (item = >! isNaN (item)) / / combined with css, let the text scroll for (let index = 0) Index

< numberItems.length; index++) { const elem = numberItems[index]; elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)` } }, // 处理订单数字 toOrderNum(num){ num = num.toString(); if(num.length < 8){ num = '0' + num; // 未满8位，补零 this.toOrderNum(num); // 递归添加"0"补位 } else if(num.length == 8){ this.orderNum = num.split('') } else{ // 数据量超过8位 this.$message.error('数据量过大'); } this.setNumberTransform(); } } } .box-item{ position: relative; height: 100px; font-size: 54px; line-height: 41px; text-align: center; list-style: none; color: #2D7CFF; writing-mode: vertical-lr; text-orientation: upright; -moz-user-select: none; -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } /*默认逗号设置*/ .number-item{ width: 10px; height: 100px; margin-right: 5px; line-height: 10px; font-size: 48px; position: relative; & >

Span {position: absolute; width: 100%; bottom: 0; writing-mode: vertical-rl; text-orientation: upright;}} / * scroll number setting * / .number-item {width: 41px; height: 75px; background: url (. / img/bg.jpg) no-repeat center center Background-size: 100% 100%; list-style: none; margin-right: 5px; border-radius:4px; border:1px solid rgba (221 position: relative; display: inline-block; margin-right: 10px; width: 100%; height: 100%) Writing-mode: vertical-rl; text-orientation: upright; overflow: hidden; & > I {font-style: normal; position: absolute; top:11px; left: 50%; transform: translate (- 50%) Transition: transform 1s ease-in-out; letter-spacing: 10px;}} .number-item:last-child {margin-right: 0;} so far, I believe you have a deeper understanding of "how to realize the animation of vue flipping". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.