This package is now deprecated and has been archived. For the current version of the Kendo UI Animations for React, refer to the official website
This repository contains the source code and documentation of the Kendo UI Animation package for React.
Currently, it includes the following components:
- Fade
- Expand
- Push
- Slide
- Zoom
For more information on upcoming Animation features, refer to the Roadmap.
The Animation components use the ReactTransitionGroup component to animate elements that appear, enter, or leave.
The Fade animates newly-added children with 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 onClick={this.onClick}>Animate</button>
</dd>
</dl>
<KendoReactAnimation.Fade>
<div className="content" key={index}>{index}</div>
</KendoReactAnimation.Fade>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);For more examples and available configuration options, refer to the Fade documentation.
The Expand animates the CSS height 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 = { expand: true };
}
onClick = () => {
this.setState({
expand: !this.state.expand
});
}
render() {
const { expand } = this.state;
const children = expand ? (<div className="content">CONTENT</div>) : null;
return (
<div>
<dl>
<dt>
Animate:
</dt>
<dd>
<button onClick={this.onClick}>Animate</button>
</dd>
</dl>
<KendoReactAnimation.Expand>
{children}
</KendoReactAnimation.Expand>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);For more examples and available configuration options, refer to the Expand documentation.
The Push slides the new content 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 = { index: 1 };
}
onClick = () => {
this.setState({
index: this.state.index + 1
});
}
render() {
const { index } = this.state;
return (
<div>
<dl>
<dt>
Push:
</dt>
<dd>
<button onClick={this.onClick}>Animate</button>
</dd>
</dl>
<KendoReactAnimation.Push>
<div className="content" key={index}>{index}</div>
</KendoReactAnimation.Push>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);For more examples and available configuration options, refer to the Push documentation.
The Slide slides a single piece of content vertically.
<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 onClick={this.onClick}>Animate</button>
</dd>
</dl>
<KendoReactAnimation.Slide>
{children}
</KendoReactAnimation.Slide>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);For more examples and available configuration options, refer to the Slide documentation.|
The Zoom shows new content using a zoom transition.
<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>
Zoom:
</dt>
<dd>
<button onClick={this.onClick}>Animate</button>
</dd>
</dl>
<KendoReactAnimation.Zoom>
<div className="content" key={index}>{index}</div>
</KendoReactAnimation.Zoom>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);For more examples and available configuration options, refer to the Zoom documentation.
The Animation components are published as a public scoped NPM package in the Telerik organization in http://npmjs.org/.
Install it using NPM.
npm install --save @telerik/kendo-react-animation;Once installed, import the module.
// ES2015 module syntax
import {Fade} from 'kendo-react-animation';// CommonJS format
var Fade = require('kendo-react-animation').Fade;To install the npm package, it is recommended that you use Node.js 5.0.0 or later versions.
The Animation components work in all browsers supported by the React framework—Internet Explorer 9 and later versions.
Below are explained the basic terms the suite for React applies.
A Component refers to a React Component.
A package contains one or more components, developed in a single repository and distributed in a single NPM package. For example, the Fade, Expand, Slide, Push, and Zoom components for React are part of the Animation Package.