انیمیشن ها در ReactJS – آموزش ReactJS

جمعه ۲۴ اسفند ۱۳۹۷
بازدید ۱,۶۲۹ نفر
آرتین
(5 امتیاز از 1 رای)
Loading...

تصویر reactjs-animations_6195 انیمیشن ها در ReactJS - آموزش ReactJS

انیمیشن ها در ReactJS

در این فصل چگونگی استفاده از انیمیشن ها در ReactJS را بررسی خواهیم کرد.

مرحله اول : نصب React CSS Transitions Group

این یک Add-on برای ReactJS است که به منظور ایجاد انیمیشن و transition های CSS استفاده می شود. با استفاده از دستور زیر می توانید آن را نصب کنید:

C:UsersusernameDesktopreactApp>npm install react-addons-css-transition-group

1	C:UsersusernameDesktopreactApp>npm install react-addons-css-transition-group

مرحله دوم : افزودن فایل CSS

یک فایل جدید با نام style.css ایجاد کنید. مانند نمونه زیر:

C:UsersTutorialspointDesktopreactApp>type nul > css/style.css

1	C:UsersTutorialspointDesktopreactApp>type nul > css/style.css

برای اینکه بتوانیم از آن در برنامه استفاده کنیم، باید آن را مانند نمونه زیر به عنصر head در index.html اضافه کنیم.

<!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>

<!DOCTYPE html>

<head>

<title>React App</title>

</head>

<body>

</body>

</html>

مرحله سوم : نمایش انیمیشن

در مثال زیر ما از عنصر ReactCSSTransitionGroup به عنوان ظرفی برای نگه داری عنصری که می خواهیم با استفاده از انیمیشن آن را نمایش دهیم استفاد کرده ایم. در این مثال از transitionAppear و transitionAppearTimeout استفاده شده است.

محتوای فایل 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;

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'));

import React from 'react'

import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

محتوای فایل css/style.css:

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

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

زمانی که برنامه را اجرا کنیم، عنصر موجود در صفحه با انیمیشن ظاهر خواهد شد.

تصویر react-animations-appear_6195 انیمیشن ها در ReactJS - آموزش ReactJS

مرحله چهارم : انیمیشن Enter و Leave

این نوع انیمیشن در هنگام افزودن یک آیتم جدید به لیست یا حذف آن از لیست استفاده می شود.

محتوای فایل 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;

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 (

{item}

</div>

);

}.bind(this));

return (

<div>

<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'));

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