vue实现数字动态翻牌的效果(开箱即用)


Posted in Javascript onDecember 08, 2019

实现效果图

vue实现数字动态翻牌的效果(开箱即用)

原理

将1~9的数字竖直排版,通过translate移动位置显示不同数字,使用transition控制transform属性有动画效果

技术点

css 属性 writing-mode: vertical-lr,使数字竖直排版

移动  transform: translate(-50%, -40%); y值控制移动至哪个数字

transition  控制transform属性有动画效果

实现代码(注释比较详细,不再赘述)

<!--
 * @Author: mat
 * @Date: 2019-12-04 14:56:07
 * @LastEditTime: 2019-12-04 16:31:52
 * @LastEditors: Please set LastEditors
 * @Description: 实现数字翻牌动态效果,css 属性 writing-mode: vertical-lr,使数字竖直排版,
        2d移动 transform: translate(-50%, -40%); y值控制移动至哪个数字,transition 
        控制transform属性有动画效果 
 -->
<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 {
    data() {
      return {
        orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
      }
    },
    mounted(){
      setTimeout(() => {
        this.toOrderNum(12654) // 这里输入数字即可调用
      }, 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 // 如未满八位数,添加"0"补位
          this.toOrderNum(num) // 递归添加"0"补位
        } else if (num.length === 8) {
          // 订单数中加入逗号
          // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
          this.orderNum = num.split('') // 将其便变成数据,渲染至滚动数组
        } else {
          // 订单总量数字超过八位显示异常
          this.$message.warning('总量数字过大')
        }
        this.setNumberTransform()
      },
    }
  }
</script>
<style scoped lang='scss'>
   /*订单总量滚动数字设置*/
  .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;
    /* overflow: hidden; */
  }
  /* 默认逗号设置 */
  .mark-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(/images/text-bg-blue.png) no-repeat center center;
    background-size: 100% 100%;
    // background: #ccc;
    list-style: none;
    margin-right: 5px;
    // background:rgba(250,250,250,1);
    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实现数字动态翻牌的效果(开箱即用)

总结

以上所述是小编给大家介绍的vue实现数字动态翻牌的效果(开箱即用),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 #Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 #Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 #Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 #Javascript
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
json解析大全 双引号、键值对不在一起的情况
Dec 06 #Javascript
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
three.js实现圆柱体
2018/12/30 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Python中__name__的使用实例
2015/04/14 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
校园奶茶店创业计划书
2014/01/23 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
员工给公司的建议书
2019/06/24 职场文书
创业计划书之熟食店
2019/10/16 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers