1.翻牌模式:
两个文件:flipclock.vue flipper.vue
1.1 flipClock.vue
<template>
<div class="FlipClock">
<Flipper ref="flipperHour1" />
<Flipper ref="flipperHour2" />
<!-- <em>,</em> -->
<Flipper ref="flipperMinute1" />
<Flipper ref="flipperMinute2" />
<Flipper ref="flipperMinute3" />
<!-- <em>:</em> -->
<!-- <Flipper ref="flipperSecond1" />
<Flipper ref="flipperSecond2" />-->
</div>
</template>
<script>
import Flipper from "./Flipper";
export default {
name: "FlipClock",
props: {
defaultNum: {//初始化显示的数字,默认为0000
type: [String],
default: "00230"
},
changeNum:{
type: [String],
default: "12345"
}
},
data() {
return {
timer: null,
flipObjs: []
};
},
watch: {
changeNum(val) {
this.flipObjs = [
this.$refs.flipperHour1,
this.$refs.flipperHour2,
this.$refs.flipperMinute1,
this.$refs.flipperMinute2,
this.$refs.flipperMinute3
// this.$refs.flipperSecond1,
// this.$refs.flipperSecond2
];
this.init();
this.run();
}
},
components: {
Flipper
},
methods: {
// 初始化数字
init() {
let nowTimeStr = this.defaultNum;
for (let i = 0; i < this.flipObjs.length; i++) {
this.flipObjs[i].setFront(nowTimeStr[i]);
}
},
// 开始计时
run() {
let nowTimeStr = this.defaultNum;
let nextTimeStr = this.changeNum;
for (let i = 0; i < this.flipObjs.length; i++) {
if (nowTimeStr[i] === nextTimeStr[i]) {
continue;
}
this.flipObjs[i].flipDown(nowTimeStr[i], nextTimeStr[i]);
}
},
},
mounted() {}
};
</script>
<style>
.FlipClock {
text-align: center;
}
.FlipClock .M-Flipper {
margin: 0 3px;
}
.FlipClock em {
display: inline-block;
line-height: 102px;
font-size: 66px;
font-style: normal;
vertical-align: top;
}
</style>
1.2.flipper.vue
<template>
<div class="M-Flipper" :class="[flipType, {'go': isFlipping}]">
<div class="digital front" :class="_textClass(frontTextFromData)"></div>
<div class="digital back" :class="_textClass(backTextFromData)"></div>
</div>
</template>
<script>
export default {
name: 'FlipClock',
data() {
return {
isFlipping: false,
flipType: 'down',
frontTextFromData: 0,
backTextFromData: 1
}
},
props: {
// front paper text
// 前牌文字
frontText: {
type: [Number, String],
default: 0
},
// back paper text
// 后牌文字
backText: {
type: [Number, String],
default: 1
},
// flipping duration, please be consistent with the CSS animation-duration value.
// 翻牌动画时间,与CSS中设置的animation-duration保持一致
duration: {
type: Number,
default: 600
}
},
methods: {
_textClass(number) {
return 'number' + number
},
_flip(type, front, back) {
// 如果处于翻转中,则不执行
if (this.isFlipping) {
return false
}
this.frontTextFromData = front
this.backTextFromData = back
// 根据传递过来的type设置翻转方向
this.flipType = type
// 设置翻转状态为true
this.isFlipping = true
setTimeout(() => {
// 设置翻转状态为false
this.isFlipping = false
this.frontTextFromData = back
}, this.duration)
},
// 下翻牌
flipDown(front, back) {
this._flip('down', front, back)
},
// 上翻牌
flipUp(front, back) {
this._flip('up', front, back)
},
// 设置前牌文字
setFront(text) {
this.frontTextFromData = text
},
// 设置后牌文字
setBack(text) {
this.backTextFromData = text
}
},
created() {
this.frontTextFromData = this.frontText
this.backTextFromData = this.backText
}
}
</script>
<style>
.M-Flipper {
display: inline-block;
position: relative;
width: 26px;
height: 38px;
line-height: 38px;
/* border: solid 1px #000; */
/* border-radius: 10px; */
/* background: #fff; */
font-size: 26px;
color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
text-align: center;
font-family: 'Helvetica Neue';
}
.M-Flipper .digital:after {
content: '';
position: absolute;
left: 0;
right: 0;
background:url(./images/num-bottom.png) no-repeat;
background-size:100% 100%;
overflow: hidden;
box-sizing: border-box;
}
.M-Flipper .digital:before{
content: '';
position: absolute;
left: 0;
right: 0;
background:url(./images/num-top.png) no-repeat;
/* background:blue;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; */
background-size:100% 103%;
overflow: hidden;
box-sizing: border-box;
}
.M-Flipper .digital:before {
top: 0;
bottom: 50%;
/* border-radius: 10px 10px 0 0; */
/* border-bottom: solid 1px #666; */
}
.M-Flipper .digital:after {
top: 50%;
bottom: 0;
/* border-radius: 0 0 10px 10px; */
line-height: 0;
}
/*向下翻*/
.M-Flipper.down .front:before {
z-index: 3;
}
.M-Flipper.down .back:after {
z-index: 2;
transform-origin: 50% 0%;
transform: perspective(160px) rotateX(180deg);
}
.M-Flipper.down .front:after,
.M-Flipper.down .back:before {
z-index: 1;
}
.M-Flipper.down.go .front:before {
transform-origin: 50% 100%;
animation: frontFlipDown 0.6s ease-in-out both;
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.M-Flipper.down.go .back:after {
animation: backFlipDown 0.6s ease-in-out both;
}
/*向上翻*/
.M-Flipper.up .front:after {
z-index: 3;
}
.M-Flipper.up .back:before {
z-index: 2;
transform-origin: 50% 100%;
transform: perspective(160px) rotateX(-180deg);
}
.M-Flipper.up .front:before,
.M-Flipper.up .back:after {
z-index: 1;
}
.M-Flipper.up.go .front:after {
transform-origin: 50% 0;
animation: frontFlipUp 0.6s ease-in-out both;
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.M-Flipper.up.go .back:before {
animation: backFlipUp 0.6s ease-in-out both;
}
@keyframes frontFlipDown {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(-180deg);
}
}
@keyframes backFlipDown {
0% {
transform: perspective(160px) rotateX(180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
@keyframes frontFlipUp {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(180deg);
}
}
@keyframes backFlipUp {
0% {
transform: perspective(160px) rotateX(-180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
.M-Flipper .number0:before,
.M-Flipper .number0:after {
content: '0';
}
.M-Flipper .number1:before,
.M-Flipper .number1:after {
content: '1';
}
.M-Flipper .number2:before,
.M-Flipper .number2:after {
content: '2';
}
.M-Flipper .number3:before,
.M-Flipper .number3:after {
content: '3';
}
.M-Flipper .number4:before,
.M-Flipper .number4:after {
content: '4';
}
.M-Flipper .number5:before,
.M-Flipper .number5:after {
content: '5';
}
.M-Flipper .number6:before,
.M-Flipper .number6:after {
content: '6';
}
.M-Flipper .number7:before,
.M-Flipper .number7:after {
content: '7';
}
.M-Flipper .number8:before,
.M-Flipper .number8:after {
content: '8';
}
.M-Flipper .number9:before,
.M-Flipper .number9:after {
content: '9';
}
</style>
1.3. 引入两张蓝色小图片
1.4.使用页面
import FlipClock from '../../Common/FlipClock'
<FlipClock :defaultNum="deviceUnlineNum" :changeNum="deviceUnlineChangeNum"/>
2.滑动数字
ppt中