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
41
votes
3 answers

Keep react-router routed-components for all history states

I make a mobile application with Cordova. Use the react-router@2.0.0 + ReactCSSTransitionGroup to implement the "card deck" animation. I have a strict Routes tree without the possibility of circular links. To improve performance and save the state…
KODerFunk
  • 510
  • 4
  • 7
29
votes
4 answers

How to animate element height in React with ReactCSSTransitionGroup?

I'm trying to animate element height with ReactCSSTransitionGroup, so this is what I would want the animation looks like: http://jsfiddle.net/cherrry/hgk4Lme9/ The problem is that I don't always know the element height, so I tried to hack the…
Cherry Ng
  • 571
  • 1
  • 4
  • 9
24
votes
7 answers

Backgroundimage is not working in react

I am new to react and trying to get background image with inline styling. But it's not working. Showing error "url is not defined" render() { return (
21
votes
2 answers

What exactly is the timeout value in React CSS Transition Group doing?

I've been reading the official docs for React Animations (React CSS Transition Group), but I'm a little unclear as to what the timeout values are used for - especially when I'm setting transitions within my CSS. Are the values a delay, duration of…
dace
  • 5,819
  • 13
  • 44
  • 74
18
votes
3 answers

React animate transition between components

I'd like to animate between two components where the first component fades out and is removed from the DOM before the next component is added to the DOM and fades in. Otherwise, the new component is added to the DOM and takes up space before the old…
Rick Jolly
  • 2,949
  • 2
  • 23
  • 31
16
votes
1 answer

React TransitionGroup and React.cloneElement do not send updated props

I am following Chang Wang's tutorial for making reusable React transitions with HOCs and ReactTransitionGroup(Part 1 Part 2) in conjunction with Huan Ji's tutorial on page transitions (Link). The problem I am facing is that React.cloneElementdoes…
Jay S.
  • 1,318
  • 11
  • 29
14
votes
1 answer

ReactCSSTransitionGroup with CSS Modules

I have a ReactCSSTransitionGroup I'm using with CSS Modules (and dynamic routing from react-router but I believe this is working as expected).
Toby
  • 12,743
  • 8
  • 43
  • 75
12
votes
6 answers

Disable React's CSSTransitionGroup in test

I'm using CSSTransitionGroup to animate an element when it appears in the DOM, or when it leaves the DOM. It works well. Now - I want to unit test this component. I'm creating a temporary DOM node and I attach it to the , I render my component…
kamituel
  • 34,606
  • 6
  • 81
  • 98
10
votes
2 answers

ReactCSSTransitionGroup only good with animating in new component?

I have ReactCSSTransitionGroup working fine (I think), the newly mounted component fades in in all its glory. The problem is that the component being replace just abruptly disappears, a problem for me because eventually I would like that my…
Stefan
  • 772
  • 4
  • 9
  • 22
8
votes
1 answer

React animation when removing an element

I am quite new to React. I am trying to learn by implementing a full CRUD. However, I am unable to get animation working well for removing a course from the list. I have configured animation on transitionAppear and on transitionLeave. The…
Leonardo
  • 1,001
  • 1
  • 13
  • 15
7
votes
1 answer

ReactCSSTransitionGroup: transitionAppear doesn't work

I'm trying to appearance/disappearance the notification, but transitionAppear doesn't work. I add item (notification popup) to the onBlur event. Animation at the time of leave works smoothly and at the time of appear it just appears abruptly without…
Arthur
  • 3,056
  • 7
  • 31
  • 61
7
votes
0 answers

How can I animate the removal or addition of elements from a `React-Virtualized` list?

It seems React-Virtualized does not support animations out of the box, but is it possible (and reasonable?) to use ReactCSSTransitionGroup to implement transitions? In my case I'd like to do a remove animation (e.g., fade opacity or shrink height)…
Chris W.
  • 37,583
  • 36
  • 99
  • 136
7
votes
2 answers

React: Rendering a list in reverse order

I'm building an app with React and Reflux, and I am trying to render a list of items in a specific order. The items are custom Post components that are rendered in reverse chronological order, so the newest post is at the top of the list. I am…
hedgeday
  • 93
  • 1
  • 1
  • 6
6
votes
0 answers

React transitions not happening on on this.props.dispatch(push(path))

I am using a react transition to fade in and fade out content. Mostly this is working fine, however I am noticing that one page is rendering instantly, without going through the transition state. My event: routeChange =(e) => { …
Steven Matthews
  • 9,705
  • 45
  • 126
  • 232
6
votes
2 answers

TypeError: Cannot read property 'baseVal' of undefined

I am unit testing my react component using renderer of react-test-renderer. it was working fine, but after using ReactCssTransitionGroup I am getting the following error "TypeError: Cannot read property 'baseVal' of undefined". not sure how to…
Hammad Tariq
  • 344
  • 2
  • 7
1
2 3
…
13 14