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
0
votes
1 answer

"appear" in CSSTransition doesn't work as expected

I'd like to implement CSSTransition to animate an element but still mount it right away. Based on the documentation: By default the child component does not perform the enter transition when it first mounts, regardless of the value of in. If you…
Baptiste Arnaud
  • 2,522
  • 3
  • 25
  • 55
0
votes
1 answer

Nesting React CSSTransition causes it to stop working

MY goal is very simple, When the component is loaded, I want: A div to grow The text in that div fades in A growing div is easy …
Jerome Paddick
  • 399
  • 1
  • 14
0
votes
1 answer

Can't switch back to 'main' menu from React's CSSTransitions

Basically I have a sidebar activated with hover which has submenus activated with react-transition-group CSSTransition element. I'm able to access the submenu from the buttons but when I click on the button that is supposed to go back to the 'main'…
hoxas
  • 55
  • 5
0
votes
1 answer

How to use ReactTransitionGroup callbacks in functional components

Im looking at examples about how to use TransitionGroup addon, but all the examples I can find are with class components and quite old articles. For example, how would you refactor this class component to an ES6 functional component and using the…
svelandiag
  • 4,231
  • 1
  • 36
  • 72
0
votes
1 answer

Framer Motion Page Transitions for React - Problem

I am coding a simple app and I wanted to add Page Transitions using framer-motion library. The problem that I'm facing is that every tutorial and documentation that I see, uses the tag inside each component, which I find kind of…
Valentin Torres
  • 1
0
votes
1 answer

Add fade-in animation to a list element in React

I have the following code that display a table's data from Laravel using axios in React. The data is displayed in real time. How can I add a fade-in animation each time a new element is added ? https://socket.io/ shows exactly what I want to do in…
BronzeJamie
  • 61
  • 2
  • 10
0
votes
1 answer

React Transition Group - How to trigger animation for a component when it updates?

I seem to lack fundamental understanding of how React Transition Group works. In this simple example, I expect the component to fade in on each update. It does not. Why is that the case? If I toggle the in prop for , then it does work. import React…
michael_fortunato
  • 160
  • 1
  • 14
0
votes
1 answer

React transform transition group issues. Want to do an easy animation, but doesn't work

Did everything by documentation http://reactcommunity.org/react-transition-group/transition Here is a codesandBox, everything what I want is on hovering the header -> header__curtain slides…
Eldar Tailov
  • 358
  • 5
  • 18
0
votes
1 answer

"Unsafe assignment of an any value" when using react-transition-group with TypeScript

I have various @typescript-eslint errors when using the Transition component from react-transition-group. I followed the official React Transition Group small example for JS but with TypeScript + ESLint on my project I'm getting the following error:…
TotomInc
  • 613
  • 1
  • 7
  • 21
0
votes
1 answer

Reactjs CSSTransition Component props in TransitionGroup

I'm currently looking into animate a set of divs. I came across this example and it is exactly what i need. As im still a noobie in react, i dont really understand how the props are being fed throw the component, inparticular the Fade params…
John Z
  • 129
  • 1
  • 7
0
votes
1 answer

React router findDomNode is deprecated

I'm working on my React website and I'm using React-router-dom for switching routes and React-transition-group to animate these routes. Everything is working just fine except I'm getting an error in my console when I switch routes. Error : I'm not…
Pinncik
  • 321
  • 3
  • 14
0
votes
1 answer

Slide transitions when switching views (routes)

Is there anybody who has experience with animating react-router-dom routes? My goal is to make slide animation and to make it slide forwards and backwards. I’m asking because I’ve searched on stackoverflow, Google or even official react-router-dom…
Pinncik
  • 321
  • 3
  • 14
0
votes
1 answer

How to animate input field using React spring

Currently I'm working on React Weather app and I'm trying to animate input field from the middle of app to the top of the app. This animation should fire when Axios call will be full-filled. In this input field you are supposed to type name of the…
Pinncik
  • 321
  • 3
  • 14
0
votes
1 answer

Shift objects when even is triggered in React (Carousel with differing widths)

I have a bunch of objects that I want to shift when an event is triggered. If the event is triggered, all objects should slide to the left until the next object, to the right of the previous object in the middle, is the next object in the…
Tobi
  • 363
  • 5
  • 15
0
votes
1 answer

how to slide in and out of items of a list with react transition group

I followed the tutorial here and it works. How do I change the css to get slide in (when enter) and slide out (when leave). Currently the css is like this: .item-enter { opacity: 0; } .item-enter-active { opacity: 1; transition: opacity 500ms…
Joshua Augustinus
  • 1,468
  • 3
  • 15
  • 28
1 2 3
…
22 23