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>
Related
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 made a layout container which has as a child as main content, toolbar, and toolbar.
toolbar and footer are dynamic parts and each container or page will have their own toolbar and footer, but layout structure is the same in all pages, so I made multiple layouts and called the related layout component in each container.
but I don't think if it's best practice or not, cause i have too many layouts right now!
so is there any way to define the layout toolbar and footer in child containers and pass them up to the layout?
I know I can use the setState method to put them into the layout state, but I also know that putting the element in the state is not best practice, cause state is for data, not JSX elements or functions.
also, another way that I thought, was putting toolbar and footer using pure javascript using innerHtml of layout toolbar and footer wrapper, but it would be real DOM, not virtual DOM, so it's not best practice either!
so if there's any best practice to having dynamic layout parts based on child component, I would be happy to know them.
thanks
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.
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
The Flex tile containers will create and remove tiles as the data changes and seems good to use in areas where the content is dynamic. How to implement this functionality in HTML? I guess that we need to use some JS and/or CSS. Any inputs?
You can ignore CSS altogether (for layout) and do this the same way that flex implements it. Without providing code itself, here's the basic idea (assuming horizontal layout):
When you add a child, add it to the right of the previous sibling. (c.y = s.y+s.width).
Check if current child exceeds the width of the parent. (c.y + c.width > p.width). If so, drop it to the next "row".
Of course, things get more complicated depending on whether you want to do a TileContainer or a FlowContainer. Should the layout look like a grid, or should it be more organic like paragraph wrapping? (if all you want it paragraph wrapping, I think making everything "float:left" will do that for you, but correct me if I'm wrong.). Assuming the TileContainer idea, you just need to iterate over all the children and make sure they have the same height/width (== max child height, max child width), and then do the layout steps mentioned above. You may want to place each child in a container div for easier control of elements that don't resize nicely.
And lastly, just make sure you listen for any window resize events so you can run your layout algorithm.
Check out the algorithms in "TileBase.as" in Flex if you want tips, but it might be easier just to roll your own.