@telerik/kendo-react-animation
v0.3.1Kendo UI Animation for React
Overview
This repository contains the source code and documentation of the Kendo UI Animation components for React.
Currently, the package includes the following Animation components:
- Fade
- Expand
- Slide
For more information on forthcoming Animation package features, refer to the Roadmap.
Basic Usage
The Animation components use the ReactTransitionGroup component to animate elements that appear, enter, or leave.
Kendo UI Fade for React
The Fade component 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')
);
Kendo UI Expand for React
The Expand component 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')
);
Kendo UI Push for React
The Push component 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')
);
Kendo UI Slide for React
The Slide component 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')
);
Kendo UI Zoom for React
The Zoom component shows a new content using 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 Animation documentation section.
Installation
The React Animation is 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;
Browser Support
The Kendo UI Animation components for React supports all browsers that are supported by the React framework—Internet Explorer 9 and later versions.
Glossary
Below are explained the basic terms used the Kendo UI suite for React applies.
Component
A Component refers to a React Component.
Package
A package contains one or more components, developed in a single repository and distributed in a single NPM package. For example, the Kendo UI Fade component for React is part of the Animation Package.
Metadata
- Apache-2.0
- Whatever
- Telerik
- released 5/16/2016