Comments (6)
@jefflung Is the onFinish
callback not sufficient for what you need? Maybe something like this -
class SomeComponent extends Component {
keyFrames = [
{ transform: 'scale(1)', opacity: 1, offset: 0 },
{ transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
{ transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
{ transform: 'scale(.6)', opacity: 0.6, offset: 1 },
];
timing = {
duration,
easing: 'ease-in-out',
delay: 0,
iterations: 2,
direction: 'alternate',
fill: 'forwards',
};
render() {
return (!this.state.finished && <Animated.div keyframes={this.keyFrames} timing={this.timing} onFinish={() => this.setState({finished: true})}>Something</Animated.div>)
}
}
I haven't tested this, but should work..
from react-web-animation.
@jefflung yeah I can make some time to get a demo together of un-mounting components when the animation ends. Your code seems to be not formatted properly, so your example is hard to read..
from react-web-animation.
Cool, thanks for your quick response. It works, thanks a lot!
from react-web-animation.
return(
!this.state.finished && <div className="page_profile">
<AnimationSequence
playState={this.state.playState}
keyframes={this.getKeyFrames()}
>
<Animatable.div
id="1"
playState={this.state.playState}
keyframes={this.getKeyFrames()}
timing={this.getTiming(2000)}
onFinish={() => this.setState({finished: true})}
>
<h1>Profile</h1>
<p>Hello from the profile page!</p>
</Animatable.div>
<Animatable.div
id="2"
playState={this.state.playState}
keyframes={this.getKeyFrames1()}
timing={this.getTiming(4000)}
style={{opacity:0}}
>
<h1>Profile 2</h1>
<p>Goodbye from the profile page!</p>
</Animatable.div>
</AnimationSequence>
</div>
);
}
Thanks, it works well in Animated tag and AnimationSequence tag. However, in my case, if only the ID 1 component have to be unmounted after it's animation is finished, then ID 2 component appears and stays. Could you advice me again? Thanks.
from react-web-animation.
@bringking Sorry, I just format well for my comment. Would you mind to check it again and I am grateful if you could advise, thanks.
from react-web-animation.
Hi, I found there is no object key onFinish in animatable.js , so I cant call this function with animatable tag. Would you mind to add onFinish to animatable when you have time, thanks.
from react-web-animation.
Related Issues (20)
- No events? HOT 2
- Wrapping imported Component with Animatable throws "Illegal Invocation" HOT 3
- TypeError: Cannot read property 'playState' of null HOT 2
- CSS Sprite HOT 2
- Unknown props `player`, `playState`, `timelineLength` on <div> tag HOT 2
- Errors when rebuilding the project HOT 4
- Cannot change onFinish or onCancel callbacks on an animation HOT 2
- Problem with `dangerouslySetInnerHTML`? HOT 8
- Bulky build size with `lodash.isequal`? HOT 5
- Include web-animation-js polyfill? HOT 1
- Spike: Investigate Preact support
- Enhancement: Allow multiple animations per element
- Spike: Investigate Inferno support
- import { Animated } from '../../lib'; should be 'react-web-animation'
- Does this support svg? HOT 3
- Should it work on mobile web ? HOT 2
- ReferenceError: KeyframeEffect is not defined HOT 1
- Specificity
- Change componentWillReceiveProps for compatibility with recent Reac
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-web-animation.