vue中的数字滚动和翻牌器
作者：小矮马
这篇文章主要介绍了vue中的数字滚动和翻牌器,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1、数字滚动vue-count-to
（1）安装：
npm install vue-count-to
（2）使用：
<template>
<div>
<h2>数字滚动动画：</h2>
<CountTo :start-val="startVal" :end-val="endVal" :duration="2500" class="count-number"></CountTo>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
components: {
CountTo
},
data() {
return {
startVal: 0,
endVal: 2017
}
}
</script>（3）说明：
参考链接：http://panjiachen.github.io/countTo/demo/
2、翻牌器组件
（1）组件：
<template>
<div class="count-flop" :key="compKey">
<div :class="item!='.'?'count-flop-box':'count-flop-point'" v-for="(item, index) in value" :key="index">
<div v-if="item!='.'" class="count-flop-content" :class="['rolling_' + item]">
<div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{{item2}}</div>
</div>
<div v-else class="count-flop-content">.</div>
</div>
<div v-if="suffix" class="count-flop-unit">{{suffix}}</div>
</div>
</template>
<script>
export default {
data() {
return {
value: [],
numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
compKey: 0
};
},
props: ["val","suffix"],
watch: {
val() {
this.value = this.val.toString().split("");
this.compKey += 1;
}
},
created() {
this.value = this.val.toString().split("");
},
};
</script>
<style scoped>
.count-flop {
display: inline-block;
font-size: 0;
/* 可更改 */
height: 50px;
line-height: 50px;
font-size: 36px;
color: #4898f1;
}
.count-flop > div {
position: relative;
display: inline-block;
overflow: hidden;
height: 100%;
}
.count-flop-box {
/* 可更改 */
margin-right: 5px;
width: 36px;
border: 1px solid rgba(72, 152, 241, 0.3);
line-height: 48px;
border-radius: 6px;
}
.count-flop-point {
/* 可更改 */
margin-right: 5px;
width: 10px;
}
.count-flop-content {
font-family: MicrosoftYaHei-Bold;
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
animation-fill-mode: forwards !important;
}
.rolling_0 {
animation: rolling_0 2.1s ease;
}
@keyframes rolling_0 {
from {
transform: translateY(-90%);
}
to {
transform: translateY(0);
}
}
.rolling_1 {
animation: rolling_1 3s ease;
}
@keyframes rolling_1 {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
.rolling_2 {
animation: rolling_2 2.1s ease;
}
@keyframes rolling_2 {
from {
transform: translateY(0);
}
to {
transform: translateY(-20%);
}
}
.rolling_3 {
animation: rolling_3 3s ease;
}
@keyframes rolling_3 {
from {
transform: translateY(0);
}
to {
transform: translateY(-30%);
}
}
.rolling_4 {
animation: rolling_4 2.1s ease;
}
@keyframes rolling_4 {
from {
transform: translateY(0);
}
to {
transform: translateY(-40%);
}
}
.rolling_5 {
animation: rolling_5 3s ease;
}
@keyframes rolling_5 {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.rolling_6 {
animation: rolling_6 2.1s ease;
}
@keyframes rolling_6 {
from {
transform: translateY(0);
}
to {
transform: translateY(-60%);
}
}
.rolling_7 {
animation: rolling_7 3.1s ease;
}
@keyframes rolling_7 {
from {
transform: translateY(0);
}
to {
transform: translateY(-70%);
}
}
.rolling_8 {
animation: rolling_8 2.1s ease;
}
@keyframes rolling_8 {
from {
transform: translateY(0);
}
to {
transform: translateY(-80%);
}
}
.rolling_9 {
animation: rolling_9 3.6s ease;
}
@keyframes rolling_9 {
from {
transform: translateY(0);
}
to {
transform: translateY(-90%);
}
}
</style>（2）调用：
<template>
<div>
<h2>翻牌器动画：</h2>
<CountFlop :val="val" />
<h2>翻牌器自定义样式：</h2>
<div class="myself">
<CountFlop :val="val2" suffix="rmb" />
</div>
</div>
</template>
<script>
import CountFlop from '@/components/CountFlop.vue'
export default {
components: {
CountFlop,
},
data() {
return {
val: 2017,
val2: 16.6,
}
}
}
</script>
<style scoped lang="less">
.myself {
height: 32px;
/deep/ .count-flop {
height: 32px;
line-height: 32px;
font-size: 36px;
color: red;
}
/deep/ .count-flop-box {
margin-right: 0;
width: 22px;
border: 0;
border-radius: 0;
line-height: 32px;
}
/deep/ .count-flop-point {
margin-right: 0;
}
/deep/ .count-flop-unit {
font-size: 25px;
}
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。