成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

一個react的關(guān)于統(tǒng)計數(shù)字的動畫---Scoreboard

Sike / 838人閱讀

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

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

----------------------------------我是分割線，線割分是我 -----------------------------
提前說明一下，demo的數(shù)據(jù)變化，是我隨機產(chǎn)生的。。而大家用到的時候肯定是正式項目需求。那么如果值不變，是不會render內(nèi)部的。所以外層盡管無節(jié)操調(diào)用。所有動畫都是css做的，性能應(yīng)該是最優(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 數(shù)字的樣式 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的數(shù)據(jù)變化，是我隨機產(chǎn)生的。。而大家用到的時候肯定是正式項目需求。那么如果值不變，是不會render內(nèi)部的。所以外層盡管無節(jié)操調(diào)用。

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/95753.html

相關(guān)文章

  • Python學習之路13-記分

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

    tommego 評論0 收藏0

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

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

    learning 評論0 收藏0

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

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

    FWHeart 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<