React項目實戰（四）滾動的數字

上一篇React項目實戰（三）嘗試實現一個拉動刷新組件

需求

分析：咱們要實現一個數字滾動效果，保證每一個位上的數字都至少滾動一週，滾動效果是自下往上。讓咱們先思考一下幾個細節：
① 方案的選取：css？js?
② 滾動的內容是什麼？若是使用css動畫用什麼實現，若是使用js用什麼實現？
③ 怎麼實現每一個位上的數字依次中止？

目前實現

基於background-position-y實現定位到具體數字，使用transition-duration實現每一個位上的數字依次暫停，模仿掘金頁面的實現效果以下：

能夠跳過的一節

說一下個人思路歷程吧，我一開始竟然沒想到用動畫來實現，而是用setTimeout遞歸地插入每一個位上的數字，寫完以後才發現沒有實現滾動。而後又search了一下滾動效果，發現了一個HTML標籤<marquee>，雖然我在瀏覽器上能夠用，可是MDN提示咱們這個標籤已廢棄惹。好吧，一開始就應該想到動畫的。

預備知識

• react提供了一個react-transition-group庫，咱們能夠經過幾種方式實現

  • 定義className結合css樣式

    //官方案例
    function App() {
      const [inProp, setInProp] = useState(false);
      return (
        <div> <CSSTransition in={inProp} timeout={200} classNames="my-node"> <div> {"I'll receive my-node-* classes"} </div> </CSSTransition> <button type="button" onClick={() => setInProp(true)}> Click to Enter </button> </div>
      );
    }
    複製代碼

    .my-node-enter {
      opacity: 0;
    }
    .my-node-enter-active {
      opacity: 1;
      transition: opacity 200ms;
    }
    .my-node-exit {
      opacity: 1;
    }
    .my-node-exit-active {
      opacity: 0;
      transition: opacity 200ms;
    }
    複製代碼

  • 使用鉤子
    • 進入狀態：onEnter、onEntering、onEntered
    • 退出狀態：onExit、onExiting、onExited

• css的background屬性

  屬性	值	做用
  background-size	length|percentage|cover|contain	規定背景圖像的尺寸,可用於自適應
  background-repeat	repeat|repeat-x|repeat-y|no-repeat|inherit	定義了圖像的平鋪模式
  background-image	url	元素設置背景圖像

具體實現

• 背景圖片的設置
  由於找不到掘金的圖片，因此本身用ps作了一個24px ✖ 480px的背景圖片，在實際使用中，咱們要記住這個長寬比是1:2,方便後面作自適應調整，初始style設置以下：

  span {
      display: inline-block;
      background-image: url("number-bg-24-480.png");
      background-repeat: repeat-y;
      background-position: center 0;
      background-size: 1.5rem 30rem;
      width: 1.5rem;
      height: 3rem;
  }
  複製代碼

• 切分字符串爲數組

  this.setState({
     data: nextProps.str.split('')
   })
  複製代碼

• 具體動畫設置：回顧一下咱們預先定義的每一個位上數字大小爲1.5rem ✖ 3rem，那麼總長度爲30rem，咱們要使得每一個數字至少自下而上滾動一週，最後依次中止，具體設置以下：

  <TransitionGroup className="text-list">
      {this.state.data.map((val, index) => {
          return (
          <CSSTransition key={index} timeout={500} onEnter={e => { e.style.backgroundPositionY=`0` }} onEntering={ e => { e.style.backgroundPositionY=`${-3*val - 30}rem` e.style.transitionProperty="background-position-y" e.style.transitionDuration=`${(index+1)*this.state.delay}ms` e.style.transitionTimingFunction="ease-out" } } > <span key={index} /> </CSSTransition> ) })} </TransitionGroup>
  複製代碼

---

大功告成啦，雖然是一個很簡單的小動畫，看起來仍是很炫酷的嘛，順帶回顧了一下css的一些基礎知識。 項目地址