dfilatov / vidom-css-animation-group Goto Github PK

export const Tip = (attrs:Attrs, children:any, context:any) => (
    <div class={cssClassnameTipContainer}>
        {children}
        <CssAnimationGroup enter={GlobalAnimations.bounceInClassname} leave={GlobalAnimations.zoomOutClassname} >
            {attrs.text
                ? <div class={cssClassnameTip} key='key-for-animation'>{attrs.text}</div>
                : null
            }
        </CssAnimationGroup>
    </div>
)

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
    }   
}

                <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>