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

Re-triggering in react-transition-group

I have a login form which includes 2 options "Login with email" and "Login with phone number", and I have a button on the form to switch between these 2 options. When user clicks the button to switch between the options, I'm just hiding "phone"…
Bulent Balci
  • 644
  • 5
  • 11
0
votes
2 answers

React CSS transitions group - How to set className when using post css and CX?

Here is my code: import styles from 'styles.css'; // other code render() { return
Rutwick Gangurde
  • 4,772
  • 11
  • 53
  • 87
0
votes
1 answer

Where should I put react transition group style classes in scss?

Where should I put react transition group style classes in my scss ? I want to animate fading. After inspecting it in action I clearly see the classes attached, but with no effect. I think I treid putting them almost everywhere. Anyone with…
Dominik Kolesar
  • 100
  • 8
0
votes
1 answer

Change key of item without triggering animation using react-transition-group

I'm building a UI where there is a list of items. When the user adds an item, it will send an API request to create a new item, but it will also add the item to the list with a temporary ID. Once the API comes back, it will replace the ID of the…
Isaac
  • 213
  • 2
  • 10
0
votes
1 answer

disable react css transition group on certain events

I currently have a dashboard type app that pulls messages out of multiple slack channels and displays the ones without any replies or emojis. You can change which channel you want to view. Currently, the parent state looks something like this: state…
Syn
  • 938
  • 1
  • 10
  • 21
0
votes
0 answers

Issues on Page Transition using Reach-Router, React-Transition-Group and GSAP?

I'm having issues on page transition animation using Reach-Router Not React-Router, GSAP, and React-Transition-Group in combination. I did research and found example on page-transition animation using Reach-Router and…
sirrus
  • 341
  • 1
  • 7
  • 16
0
votes
1 answer

How to transition text change with React Transition Group?

I have a button that will change a state from true or false depending on the current state. The text on an element will change when this state changes. I tried using Transition from 'react-transition-group' because I'm using Emotion styled. const…
DjangoJefe
  • 43
  • 5
0
votes
1 answer

Show a Simple Animation on setState in react

I display a data from JSON file to the DIV in my component. I Set timeout for few seconds and after that the data displays. I want to show a simple animation when the state changes to true. Here is a sample of my Code Structure: import someData…
Nandhini Kajol
  • 75
  • 1
  • 4
  • 14
0
votes
1 answer

Slide in animation in react js

I have a list of to-do task. I want to display one task per screen and when the user clicks the next button he should be able to see the next. I want to achieve it with slide animation. I came across react-transition-group package which can be used…
Jitender
  • 7,593
  • 30
  • 104
  • 210
0
votes
1 answer

React transition group animate between components (fade in component in place of another)

I'm using react-transition-group for animations in my app. I have a Popup where I want to animate between two contents. I want to make the first content fade out and the second content appear in its place. So far I have a problem where while…
Person
  • 2,190
  • 7
  • 30
  • 58
0
votes
1 answer

React router and full page overlay transitions

I have a simple application setup so far uses react router and an external API. I have some post archives of different types and when a user requests a detail page the API makes a request, and if it gets a page displays it if not displays a 404. I'm…
Chris Morris
  • 943
  • 2
  • 17
  • 41
0
votes
2 answers

react-transition-group CSSTransition slide in on render

I'm trying to have a component conditionally render in React and slide it when it does render packages: "react": "^16.8.6", "react-transition-group": "^4.0.1", code snippet: { expanded && (
Arthur
  • 2,622
  • 4
  • 28
  • 46
0
votes
1 answer

Why the CSSTransition have no animation when component exit?

There are two page. Animation of entering page is ok, but the exit page is suddenly become block. This is version: "react-router-dom": "^4.2.2", "react-transition-group": "^4.0.1", "react": "^16.4.0", This is content in…
user8930932
  • 125
  • 1
  • 9
0
votes
1 answer

Bare bone case of react-transition-group for modal that doesn't work (codesandbox), why?

Just want to do a quick modal popout animation with react-transition-group current behavior: https://codesandbox.io/s/525zj4vwrk expected result: https://codesandbox.io/s/7m9721y03x Similar code, but somehow the first one doesn't work?
Fate Riddle
  • 364
  • 1
  • 3
  • 15
0
votes
1 answer

React CSSTransition not transitioning

I'm working with react-transition-group and the code is rendering, but the pages aren't transitioning with animation. I'm using Link and NavLink from react-router-dom if that matters. I've tried to lengthen the timeOut to see the DOM change to no…
Emily Humphrey
  • 102
  • 1
  • 7
1 2 3
…
22 23