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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue实现在data里引入相对路径
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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php4的session功能评述(二)
2006/10/09 PHP
php 高效率写法 推荐
2010/02/21 PHP
PHP获取url的函数代码
2011/08/02 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
js前端导出Excel的方法
2017/11/01 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python subprocess库的使用详解
2018/10/26 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
2014小学语文教学工作总结
2014/12/17 职场文书
个人优缺点总结
2015/02/28 职场文书
小学少先队活动总结
2015/05/08 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书