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
3
votes
1 answer

React does not recognize the `transitionAppear` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute

I am using the redux-form-material-ui DatePicker as described in the docs. However it just throws these errors. React does not recognize the transitionAppear, transitionAppearTimeout, transitionEnter and transitionEnterTimeout props on DOM…
dsaket
  • 1,827
  • 2
  • 19
  • 30
3
votes
1 answer

Switching routes animation

Recently, I've used ReactCSSTransitions to "slide" the new page from one side. This works fine except, of course, the moment it's implemented now the previous page will be blank. I need for the previous page to remain rendered until my new page is…
Rui Rocha
  • 55
  • 5
3
votes
1 answer

Trigger ReactCSSTransitionGroup on scroll

I've been trying to figure out how to trigger the react css transition group on scroll. Say i've got a stack of components and this example gets rendered off screen : // component.jsx import React from 'react' import ReactCSSTransitionGroup from…
rimraf
  • 3,925
  • 3
  • 25
  • 55
3
votes
1 answer

TransitionGroup with react and redux: replace old element with animation

Consider a use case: a block with a text inside (text is fetched from store). When text changes - block smoothly goes away and the other block appears. Pseudo code for better illustration: import TransitionGroup from…
shlajin
  • 1,416
  • 10
  • 23
3
votes
1 answer

React Router Transition Animation missing timeout

My code is very similar to the example in the official React-Router git repo. Here is a codepen that shows the problem. Here is the problem: Instead of waiting for the time specified in the transitionEnterTimeout attribute, the new element is…
Chris
  • 2,069
  • 3
  • 22
  • 27
3
votes
0 answers

ReactTransitionGroup Lifecycle Hooks Do Not Work

class Child extends Component { componentWillAppear(callback) { console.log('will appear'); callback(); } componentDidAppear() { console.log('did appear'); } componentWillEnter(callback) { callback(); console.log('will…
lao han
  • 31
  • 3
3
votes
1 answer

ReactCSSTransitionGroup leave animation not working

I can't get -leave animations to work with ReactCSSTransitionGroup. I have the following code: {React.cloneElement(children, { …
mrberggg
  • 576
  • 1
  • 7
  • 13
3
votes
1 answer

React ReactCSSTransitionGroup adding and animating new item to top of list?

I have been looking around for an example of adding items to a list with react and having it animate the newly added item, but not to the end of the list, but the beginning of the list. I found this example, but all the messing around I have done…
Chipe
  • 4,641
  • 10
  • 36
  • 64
3
votes
1 answer

Getting ReactCSSTransitionGroup to work for a fade in transition with React.js

I have a simple landing page that I want to add a transition effect to. I am using React for my view rendering. I want to have a button fade in and out based on certain states:
user1072337
  • 12,615
  • 37
  • 116
  • 195
3
votes
5 answers

Why ReactCSSTransitionGroup generates multiple components though I expect only one?

I am using ReactCSSTransitionGroup to do some animation and I found an interesting thing which does not make any sense to me. In the example below, when I click
, it will update the height of the
Hao
  • 1,476
  • 3
  • 15
  • 20
2
votes
1 answer

React CSSTransition creates new page twice and runs the transtion on these two identical pages

I use react-router and useNavigate to switch between pages. With the CSSTransition I wanted to make a smooth transition between the pages. Unfortunately it doesn't work as intended and the router deletes the current page immediately and creates the…
boiler
  • 140
  • 10
2
votes
1 answer

I cannot get React Transition Group to work. No enter or leave transitions

Hi I cannot get React Transition Group working at all. Can anyone take a look at this and see why it will not work? The links pull in the components correctly but there are no transitions. No transition coming in or going out and the console.log…
cannon303
  • 403
  • 2
  • 12
2
votes
1 answer

In React, how can I apply a CSS transition on state change, re-mount, or re-render?

Say I have a React functional component with some simple state: import React, { useState } from 'react' import { makeStyles } from "@material-ui/core" export default function Basket() { const [itemCount, setItemCount] = useState(0) …
Sasgorilla
  • 2,403
  • 2
  • 29
  • 56
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
  • 568
  • 10
  • 33
2
votes
2 answers

React: How could I add a fade out animation on delete on dynamically generated table entries?

For several days I have been trying to figure out how to add a fade out animation on dynamically generated table in React, but I had no luck in it yet. Seems like every approach I try has some limitations to it and does not work in my case: 1) I…
Konstantink1
  • 575
  • 1
  • 8
  • 26
1 2
3
…
13 14