I have a DIV panel with different controls that should be animated to show and hide at a certain moment of time. At the same time, there are lots of elements inside which have different states.
The problem is when any element inside of the panel changes its state, the panel itself starting an animation (either show or hide animation). I think it's because the whole panel is re-rendered.
So, how should I explain to React Spring which state changes should force animation to restart? And how may I prevent parent panel DIV from re-render when children state are changed?
Related
I have been trying to do a complex (for me at least) animation in react for a week and I am still unable to do it. I have attached the ss of a minimalist demo I made up in figma because I cannot share the actual design file.
I am using Next.js and I have to trigger this animation when the route changes (which happens automatically).
I have so far been using react-spring with its useTranslate hook. With this hook, I can use a state change to trigger the animation and also unmount the component at the end of it. For me the, automatic redirect happens after a state change that is coming from the backend via a subscription. I am hoping to use that to trigger the animation.
I am logically dividing this animation into two parts:
First part is the background gradient fading out along with the list while the avatars is fading in. This happens all the same time.
The cards duplicating behind it's back and slowly translating downwards and fading out.
So far I have figured out:
How to simultaneously trigger the animations. This is easy as I can pass the same state to different useTranslate hook with the same config object and the animations can be triggered at the same time and lasted the same duration.
How to trigger the opacity animation which can fade the avatars in while fading out the list.
But I am yet to figure out how:
To fade out background like that.
Duplicate the cards one behind another and then slowly translating them down. Not sure how to target each individual cards either.
Actually chain these animations so I can trigger the second one after the first.
Has anyone ever dealt with these kind of situations? Any other option than react-spring? Is it possible or easier if I use SVGs? Any piece of advice would be great.
Link to ss
I'm trying to implement a simple tabs component in a single-page app. The selected tab should (obviously) display its contents while unselected tabs keep their content available but hidden. How should I hide the content on the unselected tabs?
Each of the canonical techniques for hiding content has issues:
technique
drawback
opacity: 0
User can still potentially interact with invisible content. Breaks if a sub-element of the tab element sets the opacity property.
color: transparent, background: transparent
Same issues as above.
display: none
Component on unselected tabs is loaded in a div with no dimensions, which in my experience causes rendering issues when that content is later displayed. (Several React libraries I'm using do not properly calculate inner dimensions of columns or whatnot when they're initially rendered in a display: none div and later displayed.)
visibility: hidden
Still takes up room on the page. Breaks if some sub-element of the tab element sets the visibility property.
To sum up: I want to know how to render content as if it's actually loading on the page (i.e., with the proper dimensions), but completely invisibly, with no space reserved for it on the page and with no possibility of user interaction. Ideally, the solution should be agnostic to whatever CSS properties are set on the arbitrary component within the tab itself; i.e., the CSS inside the tab content should not be able to break the display of the tabs themselves. Is there some recommended combination of CSS properties (visibility, opacity, display, position, z-index, etc.) that does what I want here?
Normally when you open modal, the mask, i.e. the black background behind the modal spans entire screen.
How can I achieve if I want to render the black dialog in some div, as in below image? (the red div say)
I am using antd modal.
Normally the modal is mounted to the body of the document. (This is the <body\> tag.) It is however possible to change this behaviour by using the getContainer attribute. See documentation.
The next problem would be that the modal (and the mask -- or 'black background') have the position 'fixed', which means that it is fixed to the browser window. We need to change this to position 'absolute' instead, so that it would be relative to the div we want to mount it to.
See working example:
https://codesandbox.io/s/c9e5af93-09f2-421d-a8c1-3bbfeb1416fe-olcqd
This is not possible with antd.
Ant Design mounts modals to a separate part of the DOM, outside React's primary DOM tree, similar to React Portal. This is the standard way of handling modals, lightboxes, etc.
See here
You must implement your own overlay that is absolutely constrained to its parent container.
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>
I have a text area which is a separate child component of an edit form, where the user can input long text. Above it, in the parent form, I have a SAVE button that I want to disable until the user makes an actual change to the text. I have it triggered now that when a change is made, it calls the parent component which triggers the SAVE button to enable (shows its color). But my problem is that it also jumps to the top of the page when it does this. The cursor stays where the user is inputting the text, but the scrollbar jumps. I realize that the parent is rerendering because the button has changed, but I want the scroll to stay where it is, with the cursor visible. How can I achieve this?