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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 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下使用无限生命期Session的方法
2007/03/16 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
银行会计业务的个人自我评价
2013/11/02 职场文书
应聘美工求职信
2013/11/07 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
在python中读取和写入CSV文件详情
2022/06/28 Python