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 통량 사용