Stack Overflow
Stack Overflow

Questions tagged [reactcsstransitiongroup]

Related to React library transitions

Related to React library transitions:

React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.

React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.

https://reactjs.org/

202 questions
6
votes
1 answer

Correct way to use CSSTransitionGroup and Redux Connect

I'm trying to add some animation styling to a component and struggling to figure out where this is going wrong. Here is a simple component with connect() and CSSTransitionGroup (a different component elsewhere in the DOM will eventually be used to…
delinear
  • 2,745
  • 1
  • 10
  • 21
6
votes
1 answer

How to specify the order of items in ReactCSSTransitionGroup?

Is it possible to specify the order of items in a ReactCSSTransitionGroup? Consider a list of items which their order is important. If you want to show one item and hide its adjacent with one action, ReactCSSTransitionGroup confuses their order.…
Mehran
  • 15,593
  • 27
  • 122
  • 221
6
votes
2 answers

Staggering components on enter with react css transition group

I would like to add a stagger effect to all children that get rendered within a ReactCssTransitionsGroup but do not know how to go about it. I looked at this question but would like to try do it using the react transitions group. If it isn't…
Julien Vincent
  • 1,210
  • 3
  • 17
  • 40
5
votes
1 answer

Is it possible to use CSSTransitionGroup to animate in two different ways depending on state?

The scenario is: I'd like to animate a series of google-now-like cards in different directions depending on whether the user clicks "next" or "previous". Animations in one direction is easy with CSSTransitionGroup - I'm having the "next" button…
Kevin Qi
  • 3,220
  • 2
  • 22
  • 24
5
votes
2 answers

React: Animating a page switch

I was wondering if anyone could provide some insight about how to achieve an animated component/page switch with React.js. What i'd like to achieve is a component/page transition like the one on http://www.semplicelabs.com/ - a header that…
Codepunkt
  • 532
  • 4
  • 15
5
votes
3 answers

How to animate a React component on render?

I am trying to animate a React component that contains data fetched from elsewhere. Placing it in a ReactCSSTransitionGroup worked fine. That is, until I altered the component's render() method to return false until the data has been fetched (to…
Vincent
  • 4,876
  • 3
  • 44
  • 55
4
votes
0 answers

React Router v6.0.0-beta0 - Animating route transitions with TransitionGroup and CSSTransition

My app has two routes: Step1 and Step2 and a Next button that takes you from Step1 to Step2. I would like to animate the transition between Step1 and Step2 so that when the user clicks Next, Step2 slides into view from the right while Step1 slides…
user51462
  • 1,658
  • 2
  • 13
  • 41
4
votes
1 answer

React CSSTransition not animating

I want to animate a box (fade-in, fade-out) in my web app. I am using react-transition-group for this. But somehow, the animation is not working. Code import React from 'react'; import ReactDOM from 'react-dom'; import { CSSTransition } from…
darKnight
  • 5,651
  • 13
  • 47
  • 87
4
votes
2 answers

React CSSTransition For a single image with a changing [src] value?

I am working on a carousel that provides an alternating src value to an image. This does work, however I cannot get React CSSTransition to work, since technically it is the same element just with a changing src value that is bound to a state…
Gabor Szekely
  • 1,108
  • 5
  • 14
4
votes
0 answers

Another case of React CSS Transitions not applying classes

I am trying to get my React CSS Transition classes applied to my DOM elements. I have done all of the following: Referenced this question, to check correct use case and this other question making sure I am using a key attribute even when rendering…
m00saca
  • 363
  • 1
  • 7
  • 20
4
votes
1 answer

How do I resolve "React.PropTypes.shape is not a function"?

There is literally one Google result for the query "React.PropTypes.shape is not a function". It is another SO question, that does not address this error, though it has the same ostensible cause as it caused by the same React add-on. I get this…
JohnAllen
  • 7,317
  • 9
  • 41
  • 65
4
votes
2 answers

how to update a route in React Router without re-mounting the component in a single page app?

I'm looking for a way to "cosmetically" update the route in the address bar of a React/Redux/React-Router/React-Router-Redux application, without actually causing the component to remount when the route changes. I'm using React CSS Transition Groups…
tdc
  • 5,174
  • 12
  • 53
  • 102
4
votes
2 answers

ReactCSSTransitionGroup leave no Effect

I'm trying to animate an array of items from my state with ReactCSSTransitionGroup. The appear and enter classes work fine, but the leave class won't trigger. I'm removing the Items in my reducer with state.deleteIn(['globalArray','array']) and…
Jonas Laux
  • 449
  • 4
  • 19
4
votes
2 answers

Complex animation possible with ReactCSSTransitionGroup and React Router?

I'm wondering if ReactCSSTransitionGroup is right for my use case or not. On one route I have a search button, when the user clicks on it the button should transition away while it loads in the search page. Once loaded, some area of the page will…
fetimo
  • 235
  • 5
  • 13
3
votes
3 answers

CSSTransition to make a slide out drawer in css grid layout

I am trying to make a slide out drawer utilizing the npm package react-transition-group. For whatever reason, I cannot seem to get the drawer to slide out from left to right on clicking the additional criteria button. If you can solve this issue…
klaurtar1
  • 700
  • 2
  • 8
  • 29
1
2
3
…
13 14