Types

The Animation components animate their content by using various animation effects.

The Animation package delivers the following types of animations:

Fade

The Fade Animation animates newly added children by using a fade-in effect.

<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>
 <div id="app"></div>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { index: 1 };
    }

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

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

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

                <Fade>
                    <div className="content" key={index}>{index}</div>
                </Fade>
            </div>
        );
    }
}

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

Expand

The Expand Animation animates the scaleY() or scaleX() CSS property of the container element.

<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>
 <div id="app"></div>
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;

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

                <Expand>
                    {children}
                </Expand>
            </div>
        );
    }
}

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

Push

The Push Animation slides the new component by pushing the old one out.

<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>
 <div id="app"></div>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: 1 };
    }

    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>
                        Push:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Push>
                    {children}
                </Push>
            </div>
        );
    }
}

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

Reveal

The Reveal Animation animates the height or width CSS property of the container element.

<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>
 <div id="app"></div>
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;

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

                <Reveal>
                    {children}
                </Reveal>
            </div>
        );
    }
}

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

Slide

The Slide Animation slides a single piece of content in a predefined direction.

<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>
 <div id="app"></div>
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;

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

                <Slide>
                    {children}
                </Slide>
            </div>
        );
    }
}

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

Zoom

The Zoom animation displays its content by applying a zoom-in or zoom-out transition effect.

<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>
 <div id="app"></div>
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;

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

                <Zoom>
                    {children}
                </Zoom>
            </div>
        );
    }
}

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

In this article