Comments (1)
It does recalculate the heights even when they are being changed on-the-fly. You can try running the following modified Fade example ( if you're trying it in the live editor make small change like adding a space to trigger update). In the example below the interval func adds 1px to the height every 100ms. It seems to cover your case. Perhaps you're modifying error labels directly bypassing React VDOM or something like that. In React all changes must go through state. Feel free to post some counter example that has this issue but I can't reproduce it for now.
import React from 'react';
import Fade from 'react-reveal/Fade';
class FadeExample extends React.Component {
constructor(props) {
super(props);
this.state = { show: false, h:100 };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
setInterval( ()=> this.setState({ h: this.state.h + 1 }), 100 )
this.setState({ show: !this.state.show });
}
render() {
return (
<div>
<Fade left collapse cascade when={this.state.show} duration={5000}>
<div>
<h2 style={{border:'1px solid red',height:this.state.h + 'px'}}>
React Reveal
</h2>
<h2>React Reveal</h2>
<h2>React Reveal</h2>
</div>
</Fade>
<button
className="btn btn-success my-5"
type="button"
onClick={this.handleClick}
>
{ this.state.show ? 'Hide' : 'Show' } Message
</button>
</div>
);
}
}
export default FadeExample;
from react-reveal.
Related Issues (20)
- Requires update to latest version of react
- Pls update React to 17, pls want your from one New Zealand Student HOT 1
- version conflict HOT 1
- I'm Getting This Error While Installing The React-Reveal And I'm Unable To Understand How To Solve It HOT 11
- Update to react 18.0
- This lib deserve a fork to resolve this problems...
- This need to be update to react ^18.2.0 HOT 2
- Causing problems while working with React Router
- Currently working on updating the package HOT 3
- Currently working on updating the package react updated version. HOT 1
- Fade not working on enter
- Integrate with Locomotivescroll
- Installing react-reveal HOT 5
- Scroll reveal animation is firing only once HOT 1
- Can I use react-reveal directionly on astro file
- Add
- Please mention the "disabled" prop on the documentation
- Works with wrong animation
- error An unexpected error occurred: "https://registry.yarnpkg.com/@types%2freact-reveal: Not found
- Update peer dependency to add react ^18.0.0 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-reveal.