From c00ab5e9e7b5bb4bc4ff94b309d2d9fa904f05a5 Mon Sep 17 00:00:00 2001 From: Roberto Bruggemann Date: Thu, 11 Jan 2018 16:19:55 +0000 Subject: [PATCH] Set a timeout to Terminal animation If the animation has no effect, `onTransitionEnd`'s handler is not be called. Since `onTransitionEnd`'s handler controls whether the terminal is shown or not (by passing `connect=true` as a Terminal prop), set the `animated` variable to true after a timeout. Please see: * https://stackoverflow.com/questions/2087510/callback-on-css-transition/11354026#11354026 * https://github.com/scttnlsn/backbone.viewkit/issues/4 * https://forums.xamarin.com/discussion/58456/why-isnt-my-transitionlistener-getting-called --- client/app/scripts/components/embedded-terminal.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/app/scripts/components/embedded-terminal.js b/client/app/scripts/components/embedded-terminal.js index 6593578d5..deed71308 100644 --- a/client/app/scripts/components/embedded-terminal.js +++ b/client/app/scripts/components/embedded-terminal.js @@ -17,9 +17,17 @@ class EmeddedTerminal extends React.Component { } componentDidMount() { - setTimeout(() => { + this.mountedTimeout = setTimeout(() => { this.setState({mounted: true}); }); + this.animationTimeout = setTimeout(() => { + this.setState({ animated: true }); + }, 2000); + } + + componentWillUnmount() { + clearTimeout(this.mountedTimeout); + clearTimeout(this.animationTimeout); } getTransform() {