I have a component that is using React Transition Group to animate a component as it changes from one component to the next.
The problem I am having is that the next component is loading before the current animation is finished, so it looks a bit odd.
I think i could solve this if it were possible to delay the render() method when the component updates, as it never really unmounts, and this is why the component flashes the next image.
there is FAR too much code involved to paste it all here so i made my github public, and created an issue there to show what I am experiencing.
also you can view the site as it is live for this debugging session.
stevensheaves.me
Also, no judgy, its not 100% finished.
You can simply use the callback of the Transition Group namely onEntered.
A callback fired immediately after the 'enter' or 'appear' classes are removed and the done class is added to the DOM node.
You can use a flag variable to display your content. Set it to true when the callback is fired and to false when it's onEntering
Related
I am trying to animate a React component that contains data fetched from elsewhere. Placing it in a ReactCSSTransitionGroup worked fine. That is, until I altered the component's render() method to return false until the data has been fetched (to prevent it from being rendered without data).
Now, I guess the component is mounted immediately, at which point the animation classes are added, but only rendered afterwards. Is this thinking correct? How can I get the component to be animated when render returns the actual component?
ReactCSSTransitionGroup activates whenever components are added and deleted to its props.children. Since your component is mounted before you fetch data, nothing will happen after data is fetched (I think this is true even if the component's render() method returns false. Let me know in the comments if that is incorrect)
Here's a solution
Just don't mount the component (in the solution, it's a <div key="1"> tag) until the react class receives the data. Use component states on the parent component to keep track of the state of your asynchronous request.
The ReactCSSTransitionGroup doesn't play nicely with tables as it's default behaviour is to wrap tags with a span element. You can provide it with your own component, but I found the solution quite heavy and complex.
I have a different approach that allows a React component to animate each time its content changes. The animation is continually triggered by toggling between 2 duplicate CSS styles.
Other than the ReactCSSTransitionGroup, another way is to write your own css transitions with an 'enter' class that is added to the component in componentdidmount. Keep in mind that you should change the state in a requestAnimationFrame because otherwise your class would be added in the same event loop as it is mounted, thus wont animate. Here's an example:
https://codesandbox.io/s/zkm5015y1x
Also, more on event loop, a talk by Jake Archibald:
https://www.youtube.com/watch?v=cCOL7MC4Pl0
I was wondering if anyone else was having the same problems and if there are any solutions out there...
I've created an app using Material-UI and Meteor JS. All was well until I updated Material-UI to v5, where they totally changed how components were styled, now they are using #emotion.
I'm now getting a lot of noticeable performance issues with certain components on first use. And a lot of warnings in the console along the lines of "[Violation] 'foobar' handler took xxxxms".
For example, if you have a Material-UI Dialog that is popped up by clicking a button, then the first time that dialog is popped up, it can take 1-3 seconds. Subsequent pop-ups are 'instant'. If you force-reload the page, then again, on first use, you get the performance issue.
I wondered if it was something to do with the complexity of my app or some odd interaction, so I just created a brand new Meteor project (the default React one that has a button that increments a counter), installed Material-UI v5.0.6 and then replaced the button on the default app with a Material-UI component.
Immediately, I get console warnings about performance issues. In this case a warning about DOMContentLoaded taking too long on page load, then one when I click the button 'mousedown' handler took 300ms.
Opening up Chrome's Performance doo-dar, I see a first click takes around 300ms and LOTS of things are going on under the hood in emotion. One subsequent clicks, very little is going on under the hood and the event is around 3ms, ie, 100x quicker.
Any thoughts on this out there?
My question is related to my another question here: SVG using CSS3 animations in GWT
But it is more simple. Is there a way in GWT to call method after a presenter has been fully loaded?
For example lets have a SVG picture in one window (presenter) and text in another window(presenter). A button is there that when clicked it changes text presenter for SVG image presenter and vice versa (calling the go() method). I need to strip all CSS from svg an reapply it, but it has to be done AFTER the presenter is changed and image loaded. If I do it in the go() method, it will not work. Currently hacking it with schudleFixedDelay(), but want something less hacky.
EDIT1:
I mean when presenter contents are fully displayed in DOM, then I want to launch some code. It probably doesn't have anything to do with loading SVG image, just displaying it. How to know when everything from the presenter has been displayed and added to the DOM?
EDIT2:
Ok so the scheduleDeferred function is really what I am looking for. I know this function and use it, but I had more specific problem it seems. The scheduleDeferred function calls my method to fix the coordinats just fine. But when I was using it before, it did not work because of the method to fix coordinates. It seems, when I call removeAttribute("class") on SVG element, I cannot setAttribute("class", "classname") just after that. I had to make a scheduleFixedDelay there for at least 100ms, or it does not work. Not sure if the delay will work everywhere (mobiles, tablets...), but I don't know why it does not work without the delay. This is probably a solution for me.
Unless you use code splitting, GWT code is loaded all at once - before your app executes its first line of code. I assume you mean either "all presenter code is executed" or "the SVG image completed loading".
Depending on how you load the image, you can use Image class which implements load handlers (i.e. you can use onLoad()).
Alternatively, instead of a fixed delay you should use scheduleDeferred method in a Scheduler class, as explained here: GWT: Timer and Scheduler Classes
When i change an instance into another one which contains sub images, the animation doesn't work and also the events in that new instance doesn't work.
with(obj_matchbox){
instance_change(obj_match,true);}
There is nothing wrong with the code you posted. The animation should play automatically and it should fire events. The problem must lie somewhere else.
Make sure you do not have something in the draw event of obj_match, it will prevent Game Maker from handling the sprite animation for you.
For why your events do not fire, I have no idea. You have perf set to true in instance_change, so it should not be a problem.
Is there a way to refresh a component or an application back to its initial state? I have an accordion navigator that stays on the most recently selected index even if I log out. Right now, my log out function takes me back to the login page which is at state(1). If I log back in and go into the accordion, it is on the last tab I had viewed.
I would like to be able to clear any data from the controls inside the nav and reset the nav back to its default. I thought something like,
public function logout():void{
currentState = "NotLoggedIn"
myAccordion.initialize(); }
would work but nothing happens. This is done in Flex 4.
I know I can make a huge loop clearing each control individually and setting the selectedIndex of the accordion to 0. I was hoping for a simpler solution.
It depends what you mean by "State".
If you have implemented states in your Flex Component, you can revert back to a previous state using:
component.currentState = 'myInitialState';
If you are not talking about states, explicitly, but rather about the internal values of the properties of the component, then Flex does not keep a history of those property values. You can keep track of them yourself and reset them in the manually.
Once you do that, your component will be, effectively, in the initial state.