How can I unmount a component when its animation ends?

[jefflung]

Hi, can I unmount a component when its animation ends, and could I specify this function to any component I want? Can I call a remove function at the end of the getKeyFrames function? or any way which can achieve my purpose? Besides, how can I unmount or set opacity 0 for the second component which is supposed not shown before the first component finished animation? Thanks.

[bringking]

@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..

[jefflung]

Cool, thanks for your quick response. It works, thanks a lot!

[jefflung]

  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.

[bringking]

@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..

[jefflung]

@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.

[jefflung]

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.