PushProps

Represent the props of the Push Animation component for React.

<style>
.content {
   width: 100px;
   padding: 10px;
   color: #787878;
   background-color: #fcf7f8;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
}
</style>

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { direction: "right", index: 1 };
    }

    onClick = () => {
        this.setState({
            index: this.state.index + 1
        });
    }

    onChange = (e) => {
        this.setState({
            direction: e.target.value
        });
    }

    render() {
        const { direction, index } = this.state;

        return (
            <div className="row">
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Push: {direction}
                        </dt>
                        <dd>
                            <button className="k-button" onClick={this.onClick}>Animate</button>
                        </dd>
                    </dl>

                    <Push direction={direction} stackChildren={true}>
                        <div className="content" key={index}>{index}</div>
                    </Push>
                </div>
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div className="example-config">
                                <label>
                                    <input type="radio" name="direction" value="up" defaultChecked={this.state.direction === 'up'} onClick={this.onChange}/>
                                    &nbsp;Up
                                </label>
                                <br />
                                <label>
                                    <input type="radio" name="direction" value="down" defaultChecked={this.state.direction === 'down'} onClick={this.onChange}/>
                                    &nbsp;Down
                                </label>
                                <br />
                                <label>
                                    <input type="radio" name="direction" value="left" defaultChecked={this.state.direction === 'left'} onClick={this.onChange}/>
                                    &nbsp;Left
                                </label>
                                <br />
                                <label>
                                    <input type="radio" name="direction" value="right" defaultChecked={this.state.direction === 'right'} onClick={this.onChange}/>
                                    &nbsp;Right
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

appear? boolean

Defines whether a transition should happen on the first mount. Defaults to false.

childFactory? any

After the element reaches its exit state, it is no longer available in the DOM.
If a DOM operation is required, access it trough the childFactory function.

className? string

Specifies the CSS class names which are set to the Animation component.

component? string

Specifies the node type of the parent animation component. Defaults to div.

componentChildClassName? string

Specifies the CSS class names which are set to each of the animated children elements.

componentChildStyle? any

Specifies the styles which are set to each of the animated children elements.

direction? PushDirection

Specifies the direction of the Slide Animation. Defaults to out.

enter? boolean

Specifies whether to animate the entering (showing) element. Defaults to true.

exit? boolean

Specifies whether to animate a leaving (disappearing) element. Defaults to true.

id? string

Specifies the id of the Animation component.

mountOnEnter? boolean

Specifies if the animation should lazy mount on the first in={true}. Defaults to false.

onEnter? (event: AnimationEventArguments) => void

Called when a component is added to an existing Animation component and the animation has not started yet.

onEntered? (event: AnimationEventArguments) => void

Called when a component is added to an existing Animation component and the animation is now finished.

onEntering? (event: AnimationEventArguments) => void

Called when a component is added to an existing Animation component and the animation is now happening.

onExit? (event: AnimationEventArguments) => void

An event that is called after the animation has reached its exit state.

onExited? (event: AnimationEventArguments) => void

An event that is called after the animation has reached its exited state.

onExiting? (event: AnimationEventArguments) => void

An event that is called after the animation has reached its exiting state.

stackChildren? boolean

Specifies whether child elements should stack on top of each other without interfering.

style? any

Specifies the style of the parent animation component.

transitionEnterDuration? number

Specifies the duration of the animation in. After the time runs out, the animation is terminated. Defaults to 300ms.

transitionExitDuration? number

Specifies the duration of the animation out. After the time runs out, the animation is terminated. Defaults to 300ms.

unmountOnExit? boolean

Specifies if the animated component should unmount after it reaches its exited state. Defaults to false.