React Transition Group

Question

I have been reading about React Transition Group. 95% of the material talks about CSSTransitionGroup. My understanding is that CSSTransitionGroup just builds off of TransitionGroup which simply provides callback methods that correspond to various animation events.

So I've wrapped my component up in a TransitionGroup element and given it an animation event but it is never fired.

import React, { Component } from "react";

import { TransitionGroup, Transition } from "react-transition-group";



class Test extends Component {


    componentWillAppear(cb) {
        console.log('componentWillAppear')
        cb()
    }

    render() {
        return <div> test </div>
    }
}

class App extends Component {
    render() {
        return (
        <TransitionGroup>
         <Test />
         </TransitionGroup>
         )
    }
}

export default App;

i'm away from my computer now but i just npm'd the package name without specifying anything exact. — Alex Bollbach, Nov 13 '17 at 15:23
In the latest version, `TransitionGroup` is not the base of `CSSTransition`. There is a base called `Transition`: https://reactcommunity.org/react-transition-group/ — Davin Tryon, Nov 13 '17 at 15:33
i don't understand what you mean by 'base of'. i've read that article at least 5 times and cannot make sense of it. every article i've read has been wildly out of agreement with each other. do i need to use transitionGroup + transition. or can I use either alone? is there additional reading or examples that can make any of this clear? — Alex Bollbach, Nov 13 '17 at 16:15
Sorry, yeah `base` is a bit of an overloaded term. I think @Max's answer is what I was referring to. — Davin Tryon, Nov 13 '17 at 17:06

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

You can use Transition or CSSTransition without TransitionGroup, but you can't use TransitionGroup without one of the others.

From the react-transition-group docs:

The <TransitionGroup> component manages a set of <Transition> components in a list. Like with the <Transition> component, <TransitionGroup>, is a state machine for managing the mounting and unmounting of components over time.

...As items are removed or added to the TodoList the in prop is toggled automatically by the <TransitionGroup>.

Try changing your Test component's render to something like this:

render() {
    return (
        <Transition timeout={150}>
            {(status) => (
                <div className={`fade fade-${status}`}>
                    test
                <div>
            )}
        </Transition>
    )
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 13 '17 at 17:04

Max

1,517
9
16

1

i only get `entered` or `exited` states. not `entering` or `exiting` even with the timeout. – Alex Bollbach Nov 13 '17 at 23:11
also from my reading of the docs, you should be able to use TransitionGroup alone. `ReactTransitionGroup is the basis for animations. When children are declaratively added or removed from it (as in the example above), special lifecycle hooks are called on them.` – Alex Bollbach Nov 13 '17 at 23:21
Try putting a `console.log(state)` inside the Transition, before the return. – Max Nov 13 '17 at 23:24
it seems that you need to set the `in` prop for a `Transition` component. – Alex Bollbach Nov 13 '17 at 23:30
You need the `in`, but even if parents re-render I only get entered state of the transition :o( – Jeremy Mar 28 '23 at 09:12

React Transition Group

1 Answers1