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 相关文章推荐
js中arguments的用法(实例讲解)
Nov 30 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
DOM 事件流详解
Jan 20 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
简单分析js中的this的原理
Aug 31 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
PHP 调试工具Debug Tools
2011/04/30 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
《口技》教学反思
2014/02/21 职场文书
《三峡》教学反思
2014/03/01 职场文书
铁路安全事故反思
2014/04/26 职场文书
教师求职简历自我评价
2015/03/10 职场文书
2015年保送生自荐信
2015/03/24 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers