vue特效之翻牌动画


Posted in Vue.js onApril 20, 2022

本文实例为大家分享了vue实现翻牌动画的具体代码,供大家参考,具体内容如下

vue特效之翻牌动画

应用场景

常用于大屏订单数量展示

原理

  • 利用css writing-mode: vertical-rl 使数字垂直排列
  • 利用css transform 使数字滚动

实现思路

  • 根据css先让数字垂直排列,总共设置8列
  • 根据组件传递的数值,如果不满8位,递归补零
  • 补零之后,循环根据 translate(-50%, -${numberArr[index] * 10}%,查看动画
<template>
    <div class="chartNum">
        <div class="box-item">
            <li
                :class="{'number-item':!isNaN(item),'mark-item':!isNaN(item)}"
                v-for="(item,index) in orderNum"
                :key="index">
                <span v-if="!isNaN(item)">
                    <i ref="numberItem">0123456789</i>
                </span>
                <span class="comma" v-else>{{item}}</span>
            </li>
        </div>
    </div>
</template>

<script>
    export default {
        name: "hChartNum",
        props:{
          num:{
              type:Number,
              default:1123
          }
        },
        data() {
            return {
                orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
            }
        },
        mounted(){
            setTimeout(() => {
                this.toOrderNum(this.num) // 这里输入数字即可调用
            }, 500);
        },
        methods:{
            // 设置文字滚动
            setNumberTransform(){
                const numberItems = this.$refs.numberItem // 拿到数字的ref,计算元素数量
                const numberArr = this.orderNum.filter(item => !isNaN(item))
                // 结合css,让文字滚动起来
                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();
            }
        }
    }
</script>

<style scoped lang="less">
    .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;
          }
    }

    /*滚动数字设置*/
    .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,221,221,1);
        & > span{
            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%,0);
                transition: transform 1s ease-in-out;
                letter-spacing: 10px;
            }
        }
    }
    .number-item:last-child {
        margin-right: 0;
    }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Vue.js 相关文章推荐
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
解决vue中provide inject的响应式监听
Apr 19 #Vue.js
vue3种table表格选项个数的控制方法
Apr 14 #Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 #Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 #Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 #Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 #Vue.js
You might like
php xml 入门学习资料
2011/01/01 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
运动会获奖感言
2014/02/11 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
高中语文课后反思
2014/04/27 职场文书
好人好事演讲稿
2014/09/01 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
教师网络培训心得体会
2016/01/09 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
Go语言应该什么情况使用指针
2021/07/25 Golang
Python制作春联的示例代码
2022/01/22 Python
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android