React transition fade between new and old children elements - javascript

I have a React component rendering a child element via props.children.
The content of this child element is dynamic.
What is the best way to transition (fade out old, fade in new) between these elements?

Check out the React docs for some info on the ReactTransitionGroup add-on component. This should be able to do what you need.

Give this project a try: react-css-transition. It was created out of necessity because the official ReactCSSTransitionGroup was unreliable especially on lower end devices. Scroll down for the CSS Transition Group which is what you would need.
* Disclaimer, I'm the creator of react-css-transition

Related

How to scroll with programming within Vuetify Virtual Scroller?

I have used this Vuetify component https://vuetifyjs.com/en/components/virtual-scroller/ to make a virtual scroll within a card, but now I need to go to a specific scroll element when my hook mount is executed component vue.
How could I do that, thank you in advance for your help?
I am a native of Spanish therefore my English is a bit bad.

I ViewUI Vue.js show more expanding component

It's used on all the demos, the clickable blurred expand/collapse button. Is there a component for doing this for you or a demo that shows the code/styles used to do it? Would figure since they use it for all their demos and they have variations of it, they must have one in there.
https://www.iviewui.com/components/card-en
I'm hoping there's a wrapper component that does it for you. The blurring effect and the auto-expanding button. I've had to implement my own by hooking into the element and using scrollHeight/clientHeight. Hoping for a component that does the blurring and expansion for you. I'm open to other libraries.
Created my own using $refs and checking scrollHeight and clientHeight.

Simple transition for React component

I have a React component that I show/hide based on a button toggle from within its parent component. Instead of just appearing/disappearing on the page, I would like to animate the mounting and unmounting of the component to make it look as if it was sliding down from, and back into the parent. The parent is always visible.
One important note is that there are also components within the first child. One of my attempts involving CSS transitions have resulted in these children being stuck in place when the first child slides up/down. Additionally, Child has no fixed height -- it could be 100px or 1000px.
This is my only animation in the application, so I don't really want to get anything too heavy to drive it. I'm struggling to find what other people are using for this kind of thing.
For that kind of simple animations I generally use CSSTransation. The idea is pretty simple, this component will attach some classes to your element depending on the component state (mounting, unmounting,...), and you have to provide css for the animation.
I finally solved this with a small package called react-animate-height.
<div>
<AnimateHeight
duration={ 500 }
height={ height }
>
<Child />
</AnimateHeight>
</div>

How to handle loading/spinners in container elements in react

I'm trying to figure out the best way to indicate loading in react between container and presentational elements. Do folks generally avoid any view related items in container elements or do they make an exception for spinner-type elements?
That's a matter of preference, I render content in container elements as needed. A loading spinner is no exception. That being said, if you're intending to put a spinner on the whole page then personally the container is a fine spot for this. If you intend to put a spinner over a form or some content region I'd stick to your presentational component for that.

fade out old element, fade in new

I am new to react and have tried react animations. They work great when elements are added or removed in a TransitionGroup. But if I replace a single element with a similar one, react detects that the content of that element has changed and does not trigger an animation.
How can I fade out a single element and fade in a new one in the same place?
For example fade out login-div, fade in dashboard-div.
If your elements have different key attributes, TransitionGroup will unmount one and mount the other.
You can read more about keys here: Composition vs Inheritance.

Categories