All Components

This website hosts native Kendo UI components built from the ground up with the ultimate performance in mind and intended to be used in the React ecosystem.

Customizing Animations

Animations enable you to customize their behavior by configuring the Animation component.

To update the Animation effect, use the transitionName property. The property defines the class name that is added to the enter or exit elements.

Entering Animations

To configure the entering animation, define the CSS classes by using the following syntax:

.{transitionName}-enter {
   /* The class that will be added on initial render of the element */
 }

 .{transitionName}-enter-active {
   /* The class that will be added after one time-frame(~16ms) to initiate the transition */
 }

The following example demonstrates how to create a custom entering animation.

<style>
    .custom-animation-enter {
        transform: scale(0);
        transition: transform 500ms ease-in-out;
    }
    .custom-animation-enter-active {
        transform: scale(1);
    }

    .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 = { show: false };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        return (
            <div>
                <dl>
                    <dt>
                        Animate:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Animation
                    transitionName="custom-animation"
                    transitionEnterDuration={300}
                    exit={false}
                >
                    {children}
                </Animation>
            </div>
        );
    }
}

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

Exiting Animations

To configure the exiting animation, define the CSS classes by using the following syntax:

.{transitionName}-exit {
   /* The class that will be added on initial render of the element */
 }

 .{transitionName}-exit-active {
   /* The class that will be added after one time-frame(~16ms) to initiate the transition */
 }

The following example demonstrates how to customize an exiting Slide Animation.

<style>
    .custom-animation-exit {
        transform: scale()1;
        transition: transform 500ms ease-in-out;
    }
    .custom-animation-exit-active {
        transform: scale(0);
    }

    .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 = { show: true };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        const slideProps = {
            slideOutDuration: 500,
            transitionName: "slide-up"
        };

        return (
            <div>
                <dl>
                    <dt>
                        Slide:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Animation
                    transitionName="custom-animation"
                    transitionExitDuration={300}
                    enter={false}
                >
                    {children}
                </Animation>
            </div>
        );
    }
}

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