Question: how to animate component that can hide itself?

[LexRiver]

Hello @dfilatov

CssTransitionGroup works perfect for the list, but I'm trying to animate a component that can hide itself. Let's say I have component like this:

import { Component } from "vidom/lib/vidom";

export default class Test extends Component<{ show: boolean }, any>{
    onRender(){
        if(this.attrs.show) return <div>{this.children}</div>
        //return node('fragment')
        return null
    }   
}

And I'm using it something like this:

                <CssTransitionGroup
                    appearFrom="from"
                    appearTo="to"
                    enterFrom="from"
                    enterTo="to"
                    leaveFrom="to"
                    leaveTo="from"
                >

                    <button onClick={() => this.setState({one: !this.state.one}) }>switch one</button>
                    <button onClick={() => this.setState({two: !this.state.two}) }>switch two</button>
                    <button onClick={() => this.setState({three: !this.state.three}) }>switch three</button>

                    <Test key="one" show={this.state.one}>one</Test>
                    <Test key="two" show={this.state.two}>two</Test>
                    <Test key="three" show={this.state.three}>three</Test>

                </CssTransitionGroup>

But it doesn't work. So what is the proper way to animate this component inside CssTransitionGroup?

[dfilatov]

Hi, @LexRiver If a component can hide itself, you need to move CssTransitionGroup inside it. Something like this:

export default class Test extends Component<{ show: boolean }, any>{
    onRender() {
        return (
            <CssTransitionGroup
                appearFrom="from"
                appearTo="to"
                enterFrom="from"
                enterTo="to"
                leaveFrom="to"
                leaveTo="from"
            >
                { this.attrs.show? <div key="anyKey">{ this.children }</div> : null }
            </CssTransitionGroup>
        );
    }   
}

[LexRiver]

Ok, thanks. Just thought it's possible to have one global CssTransitionGroup