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

285 questions
2
votes
0 answers

Custom page / route transitions in Next.js

I'm trying to achieve callback-based route transitions using Next.js's framework and Greensock animation library (if applicable). For example when I start on the homepage and then navigate to /about, I want to be able to do something…
Chang Liu
  • 1,025
  • 2
  • 13
  • 32
2
votes
1 answer

How do I get SwitchTranition to work with CSSTransition with TypeScript

So I have been using react-trasition-group to perform transition on different states of the same element and all is working fine there. The problem arises when there are multiple(two) elements to transition between. I am not sure how it works in the…
Nikhil Raj
  • 51
  • 6
2
votes
1 answer

CSSTransition from react-transition-group not applying classes

I'm trying to integrate CSSTransition to my Gatsby site, but it is not applying any of the classes. I'm utilizing CSS modules, and I've got a
that serves as the parent that fades in and out, essentially applying the fade effect to this and…
Jesse Winton
  • 306
  • 3
  • 14
2
votes
1 answer

Animations not working when entering (Tailwind, TransitionGroup, Typescript)

I've created a wrapper component to supply a list of class names via a string to support Tailwind utility transitions. This is intended to be nested in a TransitionGroup component to support animations of multiple items, like a list. I'm able to…
Steve
  • 582
  • 9
  • 23
2
votes
1 answer

How do I render divs horizontally without using flexbox?

I'm designing a website with ReactJS and Typescript and I want the pages each to live on a Card and when the user uses the Navigation bar, the current card slides away and the new one slides in. I am using react-transition-group to accomplish this.…
Cal Courtney
  • 1,197
  • 2
  • 9
  • 20
2
votes
0 answers

create a transition on every submit click with a new form

Ok so I have been trying this for a moment and I don't know how to go about it, what I want is simple, generate a brand new form but with a react transtion group effect from the old form to the new form (everytime a user clicks the submit button)…
bihire boris
  • 797
  • 7
  • 19
2
votes
1 answer

use react-transition-group as child component receives new props

I have a child component where I would like to use slide-out animation as new props are getting passed to it and I try to use react-transition-group/switch-transition but is not really clear how to use it The child component render method looks as…
fefe
  • 7,517
  • 20
  • 83
  • 158
2
votes
2 answers

Nextjs + react-transition-group don't animate

I'am in trouble with nextjs + react-animation-group, I'have follow the docs to implement but doesn't work, i need to animate a component from opacity 0 to 1 in 2.5 sec. here my test: https://codesandbox.io/s/transition-group-u5htd you can see that…
DaveIt
  • 509
  • 1
  • 4
  • 15
2
votes
2 answers

CSSTransition Component

I want to animate (fade-in) a div at or after the initial mounting of a component. After the animation is done, the div shouldn't disappear. I am trying to use CSSTransition component and looking examples on reactcommunity.org but I couldn't achieve…
TToprak1
  • 137
  • 9
2
votes
1 answer

Trying to implement react-transition-group into react-router generates error : 'Element type is invalid ...'

I am trying to use CSSTransition component from react-transition-group module to implement page transitions as a user switches from one route to another. From my code tested below, it generates the following error: Element type is invalid: expected…
Carl
  • 303
  • 1
  • 2
  • 11
2
votes
1 answer

Reactjs: Wait for animation to finish

inside my react app, users are able to enter data that is saved on the server. The data is saved immediatly, users don't have to press any "save" button. I want to display a short animation (similar to https://codepen.io/Sixclones/pen/VBdeXL)…
schadenfreude
  • 110
  • 1
  • 11
2
votes
1 answer

Can nested switch use change page animation?

I have a problem about page changing animation I'm now using react-transition-group for my animation. The one inside app.jsx works just fine but I try to apply another animation to main.jsx but it's not working. Another can help? App.jsx …
Maulik Sakhida
  • 291
  • 2
  • 14
2
votes
1 answer

React Component Open and Collapse Animation with dynamic content

I have a Component which displays values dynamically to the user in a List , i want to be able to animate the opening and closing of the list based on the state . I choose React Transition Group as it is a very low lying Animation lib for React .…
INFOSYS
  • 1,137
  • 6
  • 17
  • 36
2
votes
1 answer

My component is animating after page load when the data is loaded in the useState

I am using useState() to load some data before the component is mounted. const [leaderboardData, setLeaderboardData] = useState([]); const [featuredSelectedItem, setSelectedItem] = useState({}); useEffect(() => { let dummyData = [ …
Jake
  • 45
  • 4
2
votes
0 answers

Getting the "JSX element type 'Component' does not have any construct or call signatures.ts(2604)"

I am working on an internal software for my company, and my supervisor wants a clean up the the sharp transition that usually occurs with react-router. What I found was react-transition-group. I added it to my project, and attempted to copy what was…
Joseph Arakelian
  • 21
  • 2
1 2 3
…
18 19