score:5

Accepted answer

see refs and the dom, eventtarget.addeventlistener(), and element.getboundingclientrect() for more info.

// imperative animation
class imperativeanimation extends react.component {

  // state.
  state = {background: '#fff'}

  // render.
  render = () => (
    <div ref={this.divref} style={{height: '200vh', background: this.state.background}}>
      scroll to turn background papayawhip.
    </div>
  )
  
  // did mount.
  componentdidmount() {
    window.addeventlistener('scroll', this.onscroll)
  }
  
  // div ref.
  divref = react.createref()
  
  // on scroll
  onscroll = event => {
    const div = this.divref.current
    const {y} = div.getboundingclientrect()
    if (y <= 0) this.setstate({background: 'papayawhip'})
    else this.setstate({background: '#fff'})
  }
  
}

// mount.
reactdom.render(<imperativeanimation/>, document.queryselector('#root'))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

score:0

i think imperative animation means define animation by javascript

https://anvaka.github.io/sj/compare/


Related Query

More Query from same tag