I am aiming to create a unique animation where an icon spins 90 degrees to become flat and then seamlessly transitions into another icon, simulating a coin-spin effect.
The desired effect is for the icons to spin both on enter and exit, although there may be a slight delay due to an XHR call.
Interestingly, while the animation successfully triggers on enter, it does not seem to work as expected on exit.
These are the three distinct states of the animation, with the 'in' state being mutually exclusive.
<div className={c.wrapper}>
<Transition in={loading} timeout={allTransitions}>
{state => (
<div style={{ ...defaultStyle, ...transitionStyles[state] }}>
{(loading) && <SyncIcon className={c.loadingIcon} />}
</div>
)}
</Transition>
<Transition in={success} timeout={allTransitions}>
{state => (
<div style={{ ...defaultStyle, ...transitionStyles[state] }}>
{(success) && <SuccessIcon className={c.successIcon} />}
</div>
)}
</Transition>
<Transition in={fail} timeout={allTransitions}>
{state => (
<div style={{ ...defaultStyle, ...transitionStyles[state] }}>
{(fail) && <FailIcon className={c.failIcon} />}
</div>
)}
</Transition>
</div>
Below are the key style definitions:
const duration = 1000
const allTransitions = {
appear: duration,
enter: duration,
exit: duration
}
const easingFunction = 'ease-in-out'
const defaultStyle = {
transition: `transform ${duration}ms ${easingFunction}`,
transform: 'rotateY(90deg)',
alignSelf: 'center'
}
const transitionStyles = {
entering: { transform: 'rotateY(0deg)' },
entered: { transform: 'rotateY(0deg)' },
exiting: { transform: 'rotateY(90deg)' },
exited: { transform: 'rotateY(90deg)' },
}
You can view a demo of this animation here: https://codesandbox.io/s/coin-state-indicator-3bnv4