數字外掛滾動效果(遊戲機滾動抽獎結果)
阿新 • • 發佈:2021-07-01
引入外掛react-transition-group
import{CSSTransition,TransitionGroup}from'react-transition-group'class TextAnimation extends Component { state = { data: [] } componentDidMount(){ this.setState({ data: this.props.str.split('') }) } render() { const { timeout, interval, showBox, exit_callback, start } = this.props const delay = interval || 400 return ( <div style={{ ...this.props.style }} className={Css.text_animation} ref={ref => (this.ref = ref)} > <TransitionGroup className={Css.text_list}> {this.state.data.map((val, index) => { return ( <CSSTransition key={index} in={start} timeout={200} onEnter={e => { // e.style.backgroundPositionY = `0` e.style.backgroundPositionY = `${utils.px2rem((+45 + 30) * 9+16)}` //圖片預設位置 }} unmountOnExit onExited={exit_callback} //整個動畫結束 onEntering={ e => { // // e.style.backgroundPositionY = `${-3 * val - 30}rem` e.style.backgroundPositionY = `${utils.px2rem((-45- 32 ) * val)}` //圖片高45,2個數字間距32 // e.style.backgroundPositionY = `${utils.px2rem((0 ) * val)}` //圖片高45,2個數字間距32 e.style.transitionProperty = "background-position-y" e.style.transitionDuration = `${(index + 1) * delay}ms` e.style.transitionTimingFunction = "ease-out" } } > <span key={index} /> </CSSTransition> ) })} </TransitionGroup> </div> ) } } export default TextAnimation
對應樣式檔案
.text_animation { height: 100%; .text_list { height: 100%; } span { width: px2rem(82px); height: px2rem(88px); display: inline-block; background-image: url("../../../../img/insurance/text_animation.png"); background-repeat: repeat-y; background-position: center 0; background-size: px2rem(28px) px2rem(770px); padding-right: px2rem(10px); position: relative; top: px2rem(4px); } }
然後引入即可
最後是需要一張如下一張透明的的圖片:選擇可以選中,轉載自 :https://juejin.cn/post/6844903845965856782