Try implementing a pull refresh component

demand

Analysis: We want to achieve a number scrolling effect, ensure that each digit at least once, scrolling effect is bottom up. Let’s think about a few details first: ① choice of scheme: CSS? js? ② What is the content of the scroll? What do you do with CSS animation, what do you do with JS? ③ How to stop each digit in turn?

The current implementation

Based on background-position-Y, the specific number is positioned, and transition-duration is used to suspend the number on each bit in turn. The result of imitating the gold-digging page is as follows:

A section that can be skipped

I didn’t think of using animation at first, but used setTimeout to recursively insert the digits on each bit. After writing, I found that scrolling was not implemented. Then I searched the scrolling effect and found an HTML tag

that I could use on my browser, but MDN told us it was obsolete. Well, we should have thought of animation in the first place.

Preliminary knowledge

  • React provides a react-transition-group library that can be implemented in several ways

    • Define className with CSS style 
      // Official case
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>
  );
}
Copy the code
      .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;
}
Copy the code
    • Using the hook
      • Enter the status: onEnter, onEntering, onEntering
      • Exit status: onExit, OnWithdraw, onExited

  • Background properties of the CSS

    attribute value role
    background-size length|percentage|cover|contain Specifies the size of the background image, which can be used for adaptation
    background-repeat repeat|repeat-x|repeat-y|no-repeat|inherit Defines the tile mode of an image
    background-image url The element sets the background image

The specific implementation

  • Background image Settings

    I couldn’t find a picture of the nuggets, so I made one myself in Photoshop24 px ✖ 480 pxIn practical use, we need to remember that the aspect ratio is1:2To facilitate adaptive adjustment later, the initial style Settings are as follows: 
    span {
    display: inline-block;
    background-image: url("number-bg-24-480.png");
    background-repeat: repeat-y;
    background-position: center 0;
    background-size: 1.5 rem 30rem;
    width: 1.5 rem;
    height: 3rem;
}
Copy the code
  • Shred strings into arrays 
     this.setState({
   data: nextProps.str.split(' ')})Copy the code
  • Specific animation Settings: Review our pre-defined numeric size for each bit1.5 rem ✖ 3 rem, then the total length is30rem, we need to make each number scroll from bottom to top for at least one week, and finally stop in turn. The specific Settings are as follows: 
    <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>
Copy the code

There you have it. Although this is a very simple animation, it still looks cool, along with a review of the basics of CSS. The project address