آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

انیمیشن (Animation) در ReactJS

دوره های مرتبط با این مقاله

انیمیشن ها(Animation) در ReactJS

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


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

این برنامه افزونه ای برای ReactJS بوده که با کمک آن می توان انیمیشن ها و گذارهای CSS اولیه را ایجاد کرد. برای نصب آن از پنجره ی cmd کمک می گیریم.

C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

مرحله 2: اضافه کردن یک فایل CSS در ReactJS

بیایید یک فایل جدید style.css را ایجاد کنیم.

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

برای آن که بتوانیم در برنامه ی خود از این فایل استفاده کنیم، باید آن را به عنصر هد 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 >

مرحله 3: ظاهر کردن انیمیشن در ReactJS

حالا می خواهیم یک جزء ابتدایی ReactJS را ایجاد کنیم. از عنصر ReactCSSTransitionGroup به عنوان پوشاننده ی جزئی که ما می خواهیم آن را متحرک کنیم استفاده می شود.در اینجا از 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 خیلی ساده است.
css/style.css

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

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


انیمیشن ها(Animation) در ReactJS

مرحله 4: متحرک سازی ورود و خروج در ReactJS

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

پس از باز کردن برنامه و کلیک کردن بر روی دکمه ی Add Itemپیام زیر نمایش داده می شود.


انیمیشن ها(Animation) در ReactJS

بعد از وارد کردن اسم و OK کردن، عنصر جدید در حالت وارد شدن محو می شود.


انیمیشن ها(Animation) در ReactJS

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


انیمیشن ها(Animation) در ReactJS

برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .


  • 211
  •    170
  • تاریخ ارسال :   1397/10/19

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .