zoukankan      html  css  js  c++  java
  • 数字动画效果:countup.js和vuecountupjs的使用 吴小明

    一、countup.js

    1、下载

      npm i countup.js@1.9.3  (最新版本的有问题)

    2、DOM

        <div class="num-wrapper">
          <span ref="countupRef" v-for="item in numList" :key="item">{{item}}</span>
        </div>

      css:

      .num-wrapper {
        > span {
          padding: 10px;
          display: inline-block;
          background-color: rgba(red, 0.5);
          margin-right: 10px;
          font-family: 'digital';
          font-size: 28px;
        }
      }

    3、引入和使用

    import CountUp from 'countup.js'
    export default {
      data() {
        return { numList: [7539810.1493, 7087961, 1010452, 5163393] }
      },
      methods: {
        initCountUp() {
          // 在created中执行函数时需要通过nextTick拿到最新的DOM
          this.$nextTick(() => {
            const countupLength = this.$refs.countupRef.length
            let animal = null
            for (let i = 0; i < countupLength; i++) {
              animal = new CountUp(
                this.$refs.countupRef[i], // 目标元素
                0, // 开始值
                this.$refs.countupRef[i].innerText, // 结束值
                2, // 小数位数
                1.5 // 动画时间
              )
              animal.start()
            }
          })
        }
      },
      created() {
        this.initCountUp()
      }

    4、效果:

      

    二、vue-countupjs

    1、下载

      npm i vue-countupjs

    2、引入并注册

    import VueCountUp from 'vue-countupjs'
      components: { VueCountUp }

    3、使用

        <VueCountUp :start-value="0" :end-value="100" />
  • 相关阅读:
    [WP8] ListBox的Item宽度自动填满
    [WP8] Binding时,依照DataType选择DataTemplate
    [CLK Framework] CLK.Threading.PortableTimer
    Sql Server 中 根据列名查询表名
    hMailServer SSL 配置
    SmtpClient SSL 发送邮件异常排查
    hMailServer 配置
    ADO.NET 连接池 Session 状态分析
    SqlBulkCopy 参数配置示例
    arrow css
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15750675.html
Copyright © 2011-2022 走看看