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 24 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
Vue Element plus使用方法梳理
Dec 24 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
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
Django实现图片文字同时提交的方法
2015/05/26 Python
python简单猜数游戏实例
2015/07/09 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python打开音乐文件的实例方法
2020/07/21 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
教师演讲稿范文
2014/01/08 职场文书
团支部建设方案
2014/05/02 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
人民币符号
2022/02/17 杂记
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript