Share Posted July 29, 2020 We have an animation that is only working as expected the first time. I'll try to describe and then provide a video and code sample. https://codesandbox.io/s/sharp-tree-ss9k7?file=/src/Circle.js We have a button that pops up a React Portal modal with a bunch of content (image, copy, close btn). For this reproduction we'll focus on the CloseButton only. The Portal and content are not yet in the DOM. The component that can activate the Portal has already initialized an empty timeline and ref'd it. User clicks button to open Portal. Portal gets placed into the DOM in the body and as well as the content. This action in React fires the useLayoutEffect that for the first time applies all the animations to timeline and plays it animating in the CloseButton with a fade and slide in. When you click that CloseButton the animation is reversed and onReverseComplete this.paused(0).clear(); is called to clear out all animations and then the Portal and content are removed from the DOM. The reason this is done is that the animation in of the modal needs to be calculated each time the portal is opened as the animation is a circle that aligns to the button being clicked. Now up to this point everything works as expected. However, now when you click to open the Portal again... all elements of the animations just immediately appear and then they fade/slide in after, causing a blink effect. The #1 most unexpected part is that the timeline is being cleared AND the DOM elements being animated are being completely removed from the DOM (See div in video) however you can see in the console that just before the second initialization the CloseButton "starts" as opacity: 1 as inline style. This appears like even though the element was removed from the DOM and the timeline.... somehow it retains its previous animation styles?! Component Code: https://codesandbox.io/s/sharp-tree-ss9k7?file=/src/Circle.js Video: Link to comment Share on other sites More sharing options...
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!Register a new account
Already have an account? Sign in here.Sign In Now