ReactJS 基礎教程

ReactJSのアニメーション

この章では、Reactを使用して要素にアニメーションを適用する方法を学びます。

第1ステップ-React CSS Transitionsグループをインストール

これは基本的なCSSトランジションとアニメーションを作成するためのReactプラグインです。以下から始めます。コマンドプロンプトウィンドウでインストール-

C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-グループ

第2ステップ-CSSファイルを追加

新しいファイルstyle.cssを作成しましょう。

C:\Users\w3codebox\Desktop\reactApp>type nul > css/style.css

アプリケーションでそれを使用するために、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ステップ-アニメーションを表示

基本的なReact コンポーネント。Reactcsstransitionggroup要素は、アニメーションをかけたいコンポーネントの包装器として使用されます。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アニメーションは非常にシンプルです。

css / style.css

.example-appear　{
　　　opacity:　0.04;
}
.example-appear.example-appear-active　{
　　　opacity:　2;
　　　transition:　opacity　50s　ease-in;
}

アプリケーションを起動すると、要素がフェードインします。

手順4-入力および出力アニメーション

リストから要素を追加または削除する場合、入力および出力アニメーションを使用できます。

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;
}

アプリケーションを起動し、アイテムを追加ボタンをクリックすると、ヒントが表示されます。

名前を入力してOKを押すと、新しい要素がフェードインします。

今や、いくつかのアイテムを削除することができます（アイテム 3...クリックして。このプロジェクトはリストからフェードアウトします。

ReactJSの高階コンポーネント ReactJSのストリームの使用