17一起广州做网站,一台网站服务器多少钱,自己建设企业网站,网站建设免责声明数字翻转的效果 实现数字翻转的效果上面为出来的样子
下面为代码#xff0c;使用的时候直接引入#xff0c;还有就是把图片的路径自己换成自己或者先用颜色替代#xff0c;传入num和numlength即可
templatediv v-for(item, index) in processedNums使用的时候直接引入还有就是把图片的路径自己换成自己或者先用颜色替代传入num和numlength即可
templatediv v-for(item, index) in processedNums :keyindex classfilp_boxdivclasscard-container:class{ entry: flipState[index] }v-ifitem .!-- div classline/div --div classcard1 card-item./divdiv classcard2 card-item./divdiv classcard3 card-item./divdiv classcard4 card-item./div/divdiv classcard-container :class{ entry: flipState[index] } v-else!-- div classline/div --div classcard1 card-item{{ item }}/divdiv classcard2 card-item{{ item }}/divdiv classcard3 card-item{{ item }}/divdiv classcard4 card-item{{ item }}/div/div/div
/templatescript
export default {props: {nums: {validator: function(value) {// 判断值是否为数字或者可以转换为数字的字符串return !isNaN(value) || typeof value string;},required: true,default: () 0,},numlength: {type: Number,default: 7,},},watch: {nums(newVal, oldVal) {// 重置所有翻转状态this.flipState this.processedNums.map(() false);let newnum this.processedNumsWatch(newVal);let oldnum this.processedNumsWatch(oldVal);// 使用$nextTick确保DOM已更新后再触发动画this.cleanTimer setTimeout(() {newnum.forEach((item, index) {if (item ! oldnum[index]) {this.flipState[index] true;}});}, 50);},numlength(newVal, oldVal) {// 重置所有翻转状态this.flipState this.processedNums.map(() false);},},data() {return {flipState: [], // 用于记录每个数字容器的翻转状态cleanTimer: null,};},computed: {// 计算属性来处理nums这里简单地假设处理逻辑是添加一个id字段processedNums() {let string this.nums.toString();// 字符串转数组let array Array.from(string);// 数组补0let valueArr this.padArray(array, this.numlength);return valueArr;},},methods: {// 补0padArray(arr, max) {while (arr.length max) {arr.unshift(0);}return arr;},processedNumsWatch(val) {let string val.toString();// 字符串转数组let array Array.from(string);// 数组补0let valueArr this.padArray(array, this.numlength);return valueArr;},},beforeDestroy() {clearTimeout(this.cleanTimer);},
};
/script
style scoped
.filp_box {display: inline-block;margin: 0 1px;
}
.card-container {width: 27px;height: 40px;/* background: #000000; */position: relative;
}
.line {position: absolute;z-index: 100;width: 100%;background-color: #fff;height: 3px;top: 49%;
}
.card-item {position: absolute;width: 100%;height: 50%;overflow: hidden;
}.card1 {font-size: 36px;font-family: myFontNum;font-weight: bold;line-height: 40px;text-align: center;color: #fff;background: url(./TTTT5.png) no-repeat center;
}.card2 {font-size: 36px;font-family: myFontNum;font-weight: bold;line-height: 0px;color: #fff;text-align: center;top: 50%;background: url(./BBBBBFD.png) no-repeat center;transform-origin: center top;backface-visibility: hidden;transform: rotateX(180deg);z-index: 2;
}.card3 {font-size: 36px;font-family: myFontNum;font-weight: bold;color: #fff;line-height: 40px;text-align: center;background: url(./TTTT5.png) no-repeat center;transform-origin: center bottom;backface-visibility: hidden;z-index: 2;
}.card4 {font-size: 36px;font-family: myFontNum;font-weight: bold;color: #fff;top: 50%;line-height: 0px;text-align: center;/* overflow: hidden; */background: url(./BBBBBFD.png) no-repeat center;
}.card-container.entry .card2 {transition: 0.5s;transform: rotateX(0deg);
}.card-container.entry .card3 {transition: 0.5s;transform: rotateX(-180deg);
}
/style使用示例 FlipCard :numspropsnum :numlength7 /
