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
2
votes
0 answers

reactjs: how to use TransitionGroup&CSSTransition with a redirect on login

I'm using Laravel & Reactjs with the react-router-dom. I have made a Reactjs login page that redirects the user to the dashboard home page but it doesn't use the csstransition animation. In the dashboard I have an navbar that works with the…
TimeParadox
  • 197
  • 1
  • 2
  • 16
2
votes
1 answer

How to get one elements to slide in while the other slides out, using react and material-ui?

I have two elements in react, wrapped in a slide:
2
votes
2 answers

CSSTransition does not work. V2 react-transition-group

So, I have a tiny part of code where I'm trying to add an animation as wrapper for Tooltip Nodes. But perhaps I do something wrong, because I do not see on the screen any animation appearing during mount. Moreover, it even does not fire console.log…
Max Travis
  • 1,228
  • 4
  • 18
  • 41
2
votes
1 answer

React CSS Transition not working and classes never getting applied

This is my method in react component.I have followed all the tips from http://reactcommunity.org/react-transition-group/css-transition/ and actually copied the CSS from that as well to see how it works but I just cant seem to make it work.It seems…
code_tinkerer
  • 69
  • 1
  • 10
2
votes
0 answers

CSSTransition height animation and double code

having trouble figuring out how can i fix issue with animating height or fixing duplicated code Ideally i would have someting like this, but the problem with this approach is, when editMode is false wrapping div doesn't exist any more, if i…
Zeljko Marinkovic
  • 55
  • 6
2
votes
1 answer

How do I use CSSTransitionGroup on children columns immediately under a row?

I'm using Bootstrap's grid system in my ReactJS project. Under a row, I have multiple columns (col-md-4) which I want to animate as they are added to or removed from the row as the component state changes. But Using CSSTransitionGroup immediately…
anonym
  • 4,460
  • 12
  • 45
  • 75
2
votes
1 answer

React TransitionGroup not unmounting children on state change

I'm building a sidebar component with React Transition Group. The relevant code goes as follows: function FirstChild(props) { const childrenArray = React.Children.toArray(props.children); return childrenArray[0] || null; } class Sidebar extends…
cheng
  • 1,264
  • 2
  • 18
  • 41
2
votes
2 answers

ReactCSSTransitionGroup with reactJS 15 and ReactRouter 4

I want to create a transition animation for react router, but it's seems doesn't work (there is no transitions). As you can see below, all what i did is create a component FadeRoute which use ReactCSSTransitionGroup to create an animation, then i…
MrGildarts
  • 833
  • 1
  • 10
  • 25
2
votes
2 answers

React animate with CSSTransitionGroup on toggle

I am trying to get a transition between components entering and leaving when the button is clicked to toggle between state I have also tried putting and as seperate components but have the same result in that no…
tom harrison
  • 3,273
  • 11
  • 42
  • 71
2
votes
0 answers

React CSSTransitionGroup appear transition works only on 2D elements

I use React's CSSTransitionGroup (the new react-transition-group@1.1.2. I don't know why, but the transition is made before 3D styles are applied. Current behaviour (both in Chrome and Firefox) : Objects fade in as 2D objects from opacity: 0 to…
Sebastian
  • 1,225
  • 1
  • 16
  • 27
2
votes
2 answers

react: fade-in/slide-in animation when render component

I'm new in React. I have made a small app with a button and a list of image urls. When button is clicked, an image url is added to the list. I render the list of image urls with standard .map function. I would like to make a fast ui animation…
olefrank
  • 6,452
  • 14
  • 65
  • 90
2
votes
3 answers

Animations with React

I have to create some complex animations. It was cool to develop them with jQuery or VanillaJS, but I guess that I should choose another way with React. Google gave me ReactCSSTransitionGroup but it seems to be broken and unmaintained (according to…
dmbaranov
  • 181
  • 1
  • 4
  • 14
2
votes
0 answers

React - fade in component only after other has mounted

problem: components animating in/out leave white space in between transitions. desired output initial view has an img FOO. onEvent, mount video BAR. beging fading out img after BAR has completed mounting, FOO should have finished fade out current…
Anthony Chung
  • 1,467
  • 2
  • 22
  • 44
2
votes
2 answers

How to fade text in, then out

I'm trying to make a notification next appear to a text input to inform the users their text was saved, and then fade that notification text out. Basically I'm trying to replicate this action, when a corresponding text input is…
Slbox
  • 10,957
  • 15
  • 54
  • 106
2
votes
1 answer

React animation: doubled element on state change

I'm building an automatic slideshow that switch images every 5 seconds. I use the ReactCSSTransitionGroup to create a fade in method when the new image comes in. The issue is when the new image is fading in, the old image is still there and both…
stenwolf
  • 311
  • 5
  • 13
1 2 3
…
13 14