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
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
- Define className with CSS style
-
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 px
In practical use, we need to remember that the aspect ratio is1:2
To 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 bit
1.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