ReactJS 菜鳥教程
ReactJS 動(dòng)畫
在本章中，我們將學(xué)習(xí)如何使用React對(duì)元素進(jìn)行動(dòng)畫處理。
第1步-安裝React CSS Transitions組
這是React插件，用于創(chuàng)建基本的CSS過渡和動(dòng)畫。我們將從command prompt窗口安裝它-
C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group
第2步-添加CSS文件
讓我們創(chuàng)建一個(gè)新文件style.css。
C:\Users\nhooo\Desktop\reactApp>type nul > css/style.css
為了能夠在應(yīng)用程序中使用它，我們需要將其鏈接到index.html中的head元素。
<!DOCTYPE html> <html lang = "en"> <head> <link rel = "stylesheet" type = "text/css" href = "./style.css"> <meta charset = "UTF-8"> <title>React App</title> </head> <body> <div id = "app"></div> <script src = 'index_bundle.js'></script> </body> </html>
第3步-顯示動(dòng)畫
我們將創(chuàng)建一個(gè)基本的 React 組件。Reactcsstransitionggroup 元素將用作我們想要?jiǎng)赢嫽慕M件的包裝器。它將使用 transitionAppear 和 transitionappmentmeout，而 transitionEnter 和 transitionLeave 為 false。
App.jsx
import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
class App extends React.Component {
render() {
return (
<div>
<ReactCSSTransitionGroup transitionName = "example"
transitionAppear = {true} transitionAppearTimeout = {500}
transitionEnter = {false} transitionLeave = {false}>
<h1>My Element...</h1>
</ReactCSSTransitionGroup>
</div>
);
}
}
export default App;main.js
import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));CSS動(dòng)畫非常簡(jiǎn)單。
css / style.css
.example-appear {
opacity: 0.04;
}
.example-appear.example-appear-active {
opacity: 2;
transition: opacity 50s ease-in;
}一旦啟動(dòng)應(yīng)用程序，該元素就會(huì)淡入。
步驟4-輸入及輸出動(dòng)畫
當(dāng)我們想從列表中添加或刪除元素時(shí)，可以使用輸入及輸出動(dòng)畫。
App.jsx
import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
}
this.handleAdd = this.handleAdd.bind(this);
};
handleAdd() {
var newItems = this.state.items.concat([prompt('Create New Item')]);
this.setState({items: newItems});
}
handleRemove(i) {
var newItems = this.state.items.slice();
newItems.splice(i, 1);
this.setState({items: newItems});
}
render() {
var items = this.state.items.map(function(item, i) {
return (
<div key = {item} onClick = {this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick = {this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName = "example"
transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>
{items}
</ReactCSSTransitionGroup>
</div>
);
}
}
export default App;main.js
import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));css / style.css
.example-enter {
opacity: 0.04;
}
.example-enter.example-enter-active {
opacity: 5;
transition: opacity 50s ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.04;
transition: opacity 50s ease-in;
}當(dāng)我們啟動(dòng)應(yīng)用程序并單擊Add Item按鈕時(shí)，將出現(xiàn)提示。
輸入名稱并按OK后，新元素就會(huì)淡入。
現(xiàn)在，我們可以刪除一些項(xiàng)目(Item 3...)點(diǎn)擊它。該項(xiàng)目將從列表中淡出。
