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
Source: stackoverflow.com
Related Query
- Triggering imperative animations using React Refs
- scrollIntoView using React refs
- Get element reference without using refs in react
- Best practices for using React refs to call child function
- Using react refs to focus on sibling element
- Using multiple refs on a single React element
- Typescript and React refs without using inline lambdas
- Rendering from a child to a parent using refs and portals in React
- How to add a legend to the map using react leaflet, without using refs and manually modifying the DOM?
- Unable to retrieve the input field of material UI using refs in react js
- How to implement animations using react router 4
- Error using refs in React 0.14.8
- Using refs to access components in React
- react communication between parent and child using refs
- Framer animation using react intersection observer. Need multiple animations but get only one
- Why is using refs slowing down my React application?
- Using Lodash mapKeys in react component triggering error
- get checked value of ToggleButton (react-bootstrap) using refs in react
- React 0.14 - using refs via findDOMNode
- React refs - accessing DOM nodes using refs
- React using refs for child components
- Scroll to an element in a different, scrollable div in React using refs
- Using a Custom React based Modal, how can I pass a dynamic triggering function so I can re-use the component?
- Refs is empty object {} when using correct reference pattern in React with TypeScript
- React - Reading text area value from a grandparent using refs
- Using refs and .reduce scroll to the id of selected element with react with useState
- Using react refs and forms
- React - Passing focus functions to child components using refs
- Triggering the first list item while using List with map in React
- React Js using useState to create animations
More Query from same tag
- How to pass data to child without specifying it in props
- React - vanilla select value not updating
- Custom actions in Material UI select MenuItem
- 'Line-through' style in react blinking for some reason
- Open file dialog from React Component using Electron
- How to safely define HTMLCollectionOf Elements in typescript with react?
- Next JS - Meta Tags Missing in Source Code
- Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>
- Can't update the state on this React Component
- react, self increment with loop
- How to properly import React JSX from separate file in Typescript 1.6
- Conditionally Render CSS Based On Route (React)
- React action always dispatch before resolve all promises
- How to use javascript code as react syntax one?
- Adding search filter to an accordion having tables using React
- How is componentDidMount used even after state is changed?
- Is there any way to specify the auto-generated key that firebase makes when you push an object to the rtdb?
- How does Relay / GraphQL 'resolve' works?
- SCSS: On hover div, show another div
- Change tool-tip direction in react-chartjs2
- Change the FB login button text (react-native-fbsdk)
- React - wrap multiple elements in parent node
- Component's prop value isn't showing in React.js
- Calculating and deleting JSON data
- Programmatically navigate to server page if route is not found
- Hot reloading in a React app with express server
- react - state gets set to null after button click
- Reset a form in React and console log the details on the server side
- html Button on top of link
- How to pass Redux store into a component created by React.createElement