成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一個react的關于統計數字的動畫---Scoreboard

Sike / 760人閱讀

摘要：所有動畫都是做的，性能應該是最優(yōu)的了。動畫的時間數字的樣式外框的樣式的數據變化，是我隨機產生的。。如果大家有任何關于這個動畫擴展的需求可以直接提的。我盡量第一時間反饋，畢竟我是以掙為目的的，哈哈哈哈

呃呃呃，具體這個效果是不是叫這個名，我不知道，自己起的名字
具體效果直接看這個地址，https://951565664.github.io/S...
我研究了半天，也沒搞懂gif 怎么做的。
廢話不多說了。開始正題

----------------------------------我是分割線，線割分是我 -----------------------------
提前說明一下，demo的數據變化，是我隨機產生的。。而大家用到的時候肯定是正式項目需求。那么如果值不變，是不會render內部的。所以外層盡管無節(jié)操調用。所有動畫都是css做的，性能應該是最優(yōu)的了。

Scoreboard Install 
npm install scoreboard-react --save

or

yarn install scoreboard-react --save
Usage 
import Scoreboard from "scoreboard";
Props
Props desc type default
transitionDuration 動畫的時間 String 0.5s
numberStyle 數字的樣式 Object {}
style 外框的樣式 Object {}
Demo

D:codeSpaceScoreboardexampletest

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Scoreboard from "scoreboard-react";
import styles from "./index.less"

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
class App extends Component {
    state = {
        key: 2
    }
    changeNum = (params) => {
        this.setState({
            key: parseInt(Math.random() * 10) + 2
        })
    }
    componentDidMount = () => {
        this.timer = setInterval(this.changeNum, 1000)
    }
    componentWillMount = () => {
        clearInterval(this.timer)
    }

    render() {
        let numberStr = new Array(this.state.key).fill(1).map((item) => parseInt(Math.random() * 10)).reduce((prev, curr, index, array) => "" + prev + curr);
        return (
            
        );
    }
}
ReactDOM.render(, document.getElementById("root"));

demo的數據變化，是我隨機產生的。。而大家用到的時候肯定是正式項目需求。那么如果值不變，是不會render內部的。所以外層盡管無節(jié)操調用。

如果大家有任何關于這個動畫擴展的需求可以直接提的。我盡量第一時間反饋，畢竟我是以掙star為目的的，哈哈哈哈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/95753.html

相關文章

  • Python學習之路13-記分

    摘要：之所以這里要添加這四行代碼，其實是為了當你重新開始也就是第二次及以后點擊按鈕游戲時，計分板能正確顯示。當第一運行游戲時，沒有這四行也能正確顯示計分板。 《Python編程：從入門到實踐》筆記。本篇是Python小游戲《外星人入侵》的最后一篇。 1. 前言 本篇我們將結束Pygame小游戲《外星人入侵》的開發(fā)。在本篇中，我們將添加如下內容： 添加一個Play按鈕，用于根據需要啟動游戲以...

    tommego 評論0 收藏0

  • Apache 工作的三種模式：Prefork、Worker、Event

    摘要：的三種工作模式服務器目前一共有三種穩(wěn)定的，多進程處理模塊模式。模式下所能同時處理的請求總數是由子進程總數乘以值決定的，應該大于等于。默認最大的子進程總數是，加大時也需要顯式聲明最大值是。 Apache 的三種工作模式（Prefork、Worker、Event） Web服務器Apache目前一共有三種穩(wěn)定的MPM（Multi-Processing Module，多進程處理模塊）模式。 它...

    learning 評論0 收藏0

  • Apache 工作的三種模式：Prefork、Worker、Event

    摘要：的三種工作模式服務器目前一共有三種穩(wěn)定的，多進程處理模塊模式。模式下所能同時處理的請求總數是由子進程總數乘以值決定的，應該大于等于。默認最大的子進程總數是，加大時也需要顯式聲明最大值是。 Apache 的三種工作模式（Prefork、Worker、Event） Web服務器Apache目前一共有三種穩(wěn)定的MPM（Multi-Processing Module，多進程處理模塊）模式。 它...

    FWHeart 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<