Stack Overflow
Stack Overflow

Questions tagged [react-transition-group]

Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.

Website / Docs

https://reactcommunity.org/react-transition-group/

Syntax

<CSSTransition in={inProp} timeout={200} classNames="my-node">
  <div>
    {"I'll receive my-node-* classes"}
  </div>
</CSSTransition>

Demo

https://codesandbox.io/s/thirsty-pasteur-m77l2vp00x?from-embed

334 questions
1
vote
0 answers

Bad performance of React Transition Group only in Firefox

I have been researching it and found no solution. I'm using the React Transigion Group to create a fade in fade out transition. Specifically in Firefox there are problems during the animation. The transition is not smooth. In all other browsers, I…
Avallon Azevedo
  • 154
  • 5
1
vote
2 answers

react-transition-group & react-router refNode

I'm using react-transition-group to animate transtitions between pages in react-router. When i don't use nodeRef={nodeRef} animation works fine but I get this error: "findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of…
woket7
  • 41
  • 6
1
vote
0 answers

react-transition-group show child component with animation and delay after parent is rendered

How can I animate-in a child component after the parent is rendered with react-transition-group? I would like to show the Child Component as the parent is getting rendered with delay and some kind of animation for example slide-up.
deroccha
  • 1,181
  • 4
  • 22
  • 41
1
vote
1 answer

Transition Component on list elements

Is there a way to use any of the material-ui transition components on list elements so that they get animated on addition/deletion (but not mount)? Just like here: https://reactcommunity.org/react-transition-group/transition-group
Tomek
  • 502
  • 6
  • 14
1
vote
0 answers

Animate a changing prop on a react component

I've written a pure React function of the form: export function MyReactFunction(props) { return (
{props.myValue}
) } What I want to do is get the
to flash every time props.myValue is updated. I'm trying to do this with…
cjm2671
  • 18,348
  • 31
  • 102
  • 161
1
vote
0 answers

create a new instance of transition on every click(react transition group)

So briefly I already had a transition that watched if isAddRoom is true then do the transition(works fine). Now what I am trying to accomplish is that every time a user clicks submit I will obviously set the state to the initial state but I also…
bihire boris
  • 1,530
  • 3
  • 19
  • 44
1
vote
1 answer

React Tranisition group Transition animation not working on exiting

Transition animation works on entering based on height, but on exiting animaiton doesn't work. Initial height is '0px' and on entering changed height to wrapper height then on entered state height is set to 'auto'. Transition animation works…
Vivek
  • 455
  • 6
  • 14
1
vote
0 answers

How to apply height transition when props change using Styled-Components and React Transition Group?

I have a List.js component that has multiple ListItem.js components inside it and monitors each ListItems status by passing a prop active to the active ListItem. On active I want the ListItem to display an extra div that wouldn't be displayed…
RD3
  • 25
  • 3
1
vote
1 answer

Inline transition duration weird behavior

I'm making a floating up animation of a text with CSSTransition. It works, but only if I specify animation's duration in css file. What I want is to keep duration parameter in one place (js file) to keep code DRY. Right now I need to specify it in…
dhmk083
  • 229
  • 2
  • 9
1
vote
1 answer

Set classNames of React Transition Group with stage

I'm using React Transition Group. I have state classFade, and set classNames of React Transition Group = classFade. I want when I click to next button, classFade='fadeRight' and content will fade to the right. When I click to prev button,…
Nam Lee
  • 891
  • 1
  • 9
  • 20
1
vote
1 answer

ReactTransitionGroup: Is it possible to use SwitchTransition with ReactRouter to fix exit transitions using React Router ?

I am experimenting with ReactTransitionGroup and ReactRouter. The problem is that exit transitions dont work. according to RTG site: When using React Transition Group with React Router, make sure to avoid using the Switch component because it only…
Laurence Fass
  • 1,614
  • 3
  • 21
  • 43
1
vote
1 answer

How to use CSS Transition on click of input element ReactJS

I am new to ReactJS and have never used any animations in React yet with CSS. I am trying to transition the width of an input on focus using CSS and it's not working out. Below is my JSX & CSS code
…
user4770804
1
vote
0 answers

How to include class from css module to the react-transition-group component?

I'm using react-transition-group library and for styling css module.scss, How correctly pass classes to the component? Now I commented .module.scss, and instead it using simple .scss file import './SideDrawer.style.scss'; // import style from…
Stanislavas Goldyckikis
  • 11
  • 2
1
vote
2 answers

How to properly implement React Transition Group for Page Transitions

I've been tearing my hair out all day trying to get this to work. What I'm noticing is that for whatever reason, the transition classes (classNames="fade") never get applied to the page elements. So when I navigate from one page to another, for a…
Scotty Compton
  • 43
  • 2
  • 6
1
vote
0 answers

React toaster with hooks api misbehaves

I'm trying to build a toaster component with React's hook api but I can't figure out how to make it behave correctly. Right now all toasts disappear, 1 is removed, the rest appears and the cycle repeats. Ideally the oldest Toast notification…
Megamind
  • 251
  • 2
  • 16
1 2 3
…
22 23