بخش های اصلی

آموزش ReactJS

ReactJS – انیمیشن ها

در این بخش نحوه ی متحرک کردن (animate) عناصر با استفاده از React را آموزش میدیم.

مرحله 1 – نصبِ React CSS Transitions Group

React CSS Transitions Group، افزونه ی (add-on) React است که برای ایجاد transitionها و انیمیشن های ابتداییِ CSS استفاده میشه. این افزونه را از طریق پنجره ی خط فرمان (command prompt) نصب می کنیم –

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

مرحله 2 – اضافه کردن فایلِ CSS

یک فولدر جدید به نامِ css ایجاد کنین، سپس داخل آن یک فایل به نام style.css ایجاد کنین. برای این که بتوانید از این فایل در برنامه استفاده کنین باید آن را در فایلِ index.html در عنصرِ head، لینک کنین.

<link rel = "stylesheet" type = "text/css" href = "css/style.css">

مرحله ی 2 الف – انیمیشنِ Appear (ظاهر شدن)

ابتدا یک کامپوننتِ React ابتدایی ایجاد می کنیم. عنصرِ ReactCSSTransitionGroup مثلِ wraper، کامپوننتی که می خوایم متحرک کنیم را در خودش قرار میده. همانطور که می بینین این عنصر از transitionAppear و transitionAppearTimeout استفاده می کنه، در حالی که 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 خیلی ساده ست.

scc/style.css

.example-appear {
   opacity: 0.01;
}

.example-appear.example-appear-active {
   opacity: 1;
   transition: opacity 500ms ease-in;
}

وقتی برنامه را اجرا کنین، عنصر، بصورت زیر fade in میشه.

react animations appear

مرحله 2 ب – انیمیشن های Enter (وارد شدن) و Leave (خارج شدن)

اگه بخوایم عنصری را از لیست حذف کنیم یا عنصری را به آن اضافه کنیم می توانیم از انیمیشن هایِ 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;

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

.example-enter.example-enter-active {
   opacity: 1;
   transition: opacity 500ms ease-in;
}

.example-leave {
   opacity: 1;
}

.example-leave.example-leave-active {
   opacity: 0.01;
   transition: opacity 500ms ease-in;
}

اگه برنامه را اجرا کنین و روی دکمه ی Add Item کلیک کنین، پنجره ی prompt ظاهر میشه.

react animations enter prompt

اگه نام را وارد کنین و روی دکمه ی OK کلیک کنین، عنصر جدید، fade in میشه.

react animations enter fade in

حالا می توانیم با کلیک کردن روی آیتم ها تعدادی از آن ها (Item 3…) را حذف کنیم. این آیتم از لیست fade out خواهد شد.

 

react animations leave fade out

 

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد