#Vue实现 数字翻牌效果 (tansform)
效果图
思路
每个位数先用0-9占位,位数上的数值大小通过translateY调整显示,利用transition实现动画效果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字翻牌</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.num-contain {
display: flex;
justify-content: space-between;
width: 220px;
height: 60px;
}
.num-item {
width: 39px;
height: 60px;
font-size: 60px;
line-height: 60px;
color: #ffffff;
text-align: center;
overflow: hidden;
font-weight: 700;
background: url('./warn-num.png');
}
ul {
margin: 0;
list-style: none;
padding: 0;
transition: all 2s ease-in-out;
}
li {
color: #ffffff;
}
</style>
</head>
<body>
<div id="app">
<div class="num-contain">
<div v-for="(item, index) in numList" :key="index" class="num-item">
<ul :style="`transform: translateY(${-60 * item }px)`">
<li v-for="(num, idx) in 10" :key="idx">{{ idx }}</li>
</ul>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
numList: '00000'
}
},
mounted() {
setInterval(() => {
this.numList = ''
for (let i = 0; i < 5; i++) {
this.numList += `${Math.floor((Math.random() * 10))}`;
}
}, 4000)
},
methods: {
},
})
</script>
</body>
</html>