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

334 questions
0
votes
2 answers

React button onClick properly binded, yet not working

Button in react component is not providing the function in onClick when rendering DOM. Inspecting the element shows the button element's property has f noop() Where did my function go? I am making a one-page React webpage that uses react-router,…
Ariki
  • 43
  • 1
  • 7
0
votes
1 answer

Pass function from parent to children in React.Children.map?

I've been using the React Transition Group in a reusable TransitionComponent class TransitionComponent extends React.Component { render() { return(
{ React.Children.map(children,…
Evanss
  • 23,390
  • 94
  • 282
  • 505
0
votes
1 answer

React Router Transition with Accordion layout

I am rebuilding my website with React. I faced a problem with react router and react transition group. On react router documentation there is a guide how to create animated transitions. But it's attached to a certain layout: nav - link a - link…
Dmitriy
  • 93
  • 11
0
votes
1 answer

TransitionGroup / CSSTransition with position: relative?

I am developing a React-widget (step-by-step-wizard), which fetches and shows content from an API. I don't know, how long the texts, I am fetching from the API, are. So I don't know, the height of the widget. The widget should increase the height…
rakete
  • 2,953
  • 11
  • 54
  • 108
0
votes
2 answers

style object for react-transition causes 'no index signature' error

I am trying to use Transition (75,45): error TS7017: Element implicitly has an 'any' type because type '{ entering: { opacity: number; }; entered: { opacity: number; }; exiting: { opacity: number; }; exited: { opacity: number; }; }' has no index…
Anthony Kong
  • 37,791
  • 46
  • 172
  • 304
0
votes
1 answer

Reactjs: Fade-in data not working properly

I have a button in App Component if i click in this button i get next item in array in the Component but the problem now the Fade-in Transition work only the fist item and not work's for the next item. how can i let Fade-in Transition work for next…
Abdes
  • 926
  • 1
  • 15
  • 27
0
votes
0 answers

Element type invalid : expected string in react-transition-group

As mentioned in this answer here : why is react-addons-css-transition-group not working here? , I tried using the react-transition-group module but it gives the following error when I start react. How do I fix this ? Uncaught Error: Element type is…
Natesh bhat
  • 12,274
  • 10
  • 84
  • 125
0
votes
2 answers

How to show Vertical Progress Bar in react-transition-group with animation

Here is a jQuery example for a progress bar animation. and I want this feature in Reactjs without jQuery. How to implement this feature.
Arpit
  • 1,423
  • 1
  • 17
  • 20
0
votes
1 answer

React CSSTransition with Route renders next page first then works with rendering next page again

Starting from the state of that Products is rendered. I want Products above to exit with animation and ProductDetailPhotos to appear when clicking NavLink to={'/product-detail/' + variant.id} which exists in Products view , however, firstly Products…
Jagie
  • 83
  • 1
  • 10
0
votes
1 answer

Keeping Elements Aligned Using React Transition Group

I'm trying to create a carousel using the react-transition-group. I've got it mostly working, but the issue I have now is that due to what I think is an issue with the react-transition-group events flow. As one element leaves the next element…
Raydot
  • 1,458
  • 1
  • 23
  • 38
0
votes
1 answer

React CSSTransition does not apply classes correctly

I'm working on a carousel application and I have to use the React Transition Group to animate it. For some reason I can't seem to get the classes to apply correctly. It's a mix of proprietary and open-source code, so if this example isn't enough…
Raydot
  • 1,458
  • 1
  • 23
  • 38
0
votes
3 answers

Where to set state, dependent on previous and current props, in React?

I was using the componentWillReceiveProps lifecycle event to enable or disable transition to the next page. Now that this event is changed to UNSAFE_componentWillReceiveProps, I feel like I shouldn't use it anymore, however I couldn't find an…
András Geiszl
  • 966
  • 2
  • 16
  • 36
0
votes
0 answers

React Transition Group - CSSTransition won't render

I'm new to react, and I added react-transition-group to my project to add an animation affect transitioning between pages. My CSSTransition isn't rendering, and I'm not sure how to fix this issue. Here's my code: var React = require('react'); var…
Chris Gatherer
  • 55
  • 1
  • 13
0
votes
2 answers

How to trigger React TransitionGroup and Transition to animate onLoad

Given the React component below which uses React Transition Group, how can I get the Transition animation to render on component load? import React from 'react'; import { TransitionGroup, Transition } from 'react-transition-group'; const…
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
0
votes
0 answers

React Translations

I have situation where I need to create translation support for React application I have already created using JSON support like react-i18n but now I decided to create new functionality use adding HTML templates like it uses in PHP how can I…
Karo Hovhannisyan
  • 462
  • 3
  • 7
1 2 3
…
22 23