Animasi React

  • Post
    Animasi React

    Animasi adalah teknik di mana gambar dimanipulasi agar muncul sebagai gambar bergerak. Ini adalah salah satu teknik yang paling banyak digunakan untuk membuat aplikasi web interaktif. Di React, kita dapat menambahkan animasi menggunakan grup komponen eksplisit yang dikenal sebagai React Transition Group .

    React Transition Group adalah komponen tambahan untuk mengelola status komponen dan berguna untuk menentukan transisi masuk dan keluar . Itu tidak dapat menganimasikan gaya dengan sendirinya. Sebaliknya, ia mengekspos status transisi, mengelola kelas dan elemen grup, dan memanipulasi DOM dengan cara yang berguna. Itu membuat implementasi transisi visual lebih mudah.

    Grup React Transition memiliki dua API untuk membuat transisi. Ini adalah:

    1. ReactTransitionGroup:Ini digunakan sebagai API tingkat rendah untuk animasi.
    2. ReactCSSTransitionGroup:Ini digunakan sebagai API tingkat tinggi untuk mengimplementasikan transisi dan animasi CSS dasar.

    Instalasi

    Kita perlu menginstal react-transisi-group untuk membuat animasi di aplikasi React Web. Anda dapat menggunakan perintah di bawah ini.

    1. $ npm install react-transisi-group –save

    Komponen Grup Transisi React

    React Transition Group API menyediakan tiga komponen utama. Ini adalah:

    1. Transisi
    2. Transisi CSST
    3. Grup Transisi

    Transisi

    Ini memiliki API komponen sederhana untuk menggambarkan transisi dari satu status komponen ke yang lain dari waktu ke waktu. Ini terutama digunakan untuk menganimasikan pemasangan dan pelepasan komponen. Ini juga dapat digunakan untuk status transisi di tempat juga.

    Kita dapat mengakses komponen Transition menjadi empat status:

    • entering
    • entered
    • exiting
    • exited

    Transisi CSST

    Komponen CSSTransition menggunakan kelas CSS stylesheet untuk menulis transisi dan membuat animasi. Ini terinspirasi oleh perpustakaan ng-animate . Itu juga dapat mewarisi semua props dari komponen transisi. Kita dapat membagi “Transisi CSST” menjadi tiga kondisi . Ini adalah:

    • Appear
    • Enter
    • Exit

    Komponen CSSTransition harus diterapkan dalam sepasang nama kelas ke komponen anak. Kelas pertama berupa name-stage dan kelas kedua berupa name-stage-active . Misalnya, Anda memberikan nama fade, dan jika itu berlaku untuk tahap ‘enter’, kedua kelas tersebut akan menjadi fade-enter dan fade-enter-active . Mungkin juga menggunakan prop sebagai Timeout yang menentukan waktu maksimum untuk beranimasi.

    TransitionGroup

    Komponen ini digunakan untuk mengelola sekumpulan komponen transisi (Transisi dan CSSTransition) dalam sebuah daftar. Ini adalah mesin status yang mengontrol pemasangan dan pelepasan komponen dari waktu ke waktu. Komponen Transition tidak menentukan animasi apa pun secara langsung. Di sini, bagaimana item ‘list’ dianimasikan didasarkan pada komponen transisi individual. Artinya, komponen “TransitionGroup” dapat memiliki animasi yang berbeda di dalam sebuah komponen.

    Mari kita lihat contoh di bawah ini, yang dengan jelas membantu untuk memahami Animasi React.

    Contoh

    App.js

    Di file App.js, impor komponen react-transition-group, dan buat komponen CSSTransition yang digunakan sebagai pembungkus komponen yang ingin Anda animasikan. Kami akan menggunakan transisiEnterTimeout dan transisiLeaveTimeout untuk Transisi CSS. Animasi Enter dan Leave digunakan ketika kita ingin memasukkan atau menghapus elemen dari daftar.

    1. importReact, { Component } from ‘react’;
    2. import{ CSSTransitionGroup } from ‘react-transition-group’;
    3. classApp extendsComponent {
    4. constructor(props) {
    5. super(props);
    6. this.state = {items: [‘Blockchain’, ‘ReactJS’, ‘TypeScript’, ‘JavaTpoint’]};
    7. this.handleAdd = this.handleAdd.bind(this);
    8. }
    9. handleAdd() {
    10. constnewItems = this.state.items.concat([
    11. prompt(‘Enter Item Name’)
    12. ]);
    13. this.setState({items: newItems});
    14. }
    15. handleRemove(i) {
    16. let newItems = this.state.items.slice();
    17. splice(i, 1);
    18. this.setState({items: newItems});
    19. }
    20. render() {
    21. constitems = this.state.items.map((item, i) => (
    22. <div key={item} onClick={() => this.handleRemove(i)}>
    23. {item}
    24. </div>
    25. ));
    26. return(
    27. <div>
    28. <h1>Animation Example</h1>
    29. <button onClick={this.handleAdd}>Insert Item</button>
    30. <CSSTransitionGroup
    31. transitionName=”example”
    32. transitionEnterTimeout={800}
    33. transitionLeaveTimeout={600}>
    34. {items}
    35. </CSSTransitionGroup>
    36. </div>
    37. );
    38. }
    39. }
    40. export defaultApp;

    Main.js

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. importApp from ‘./App.js’;
    4. render(<App />, document.getElementById(‘app’));

    style.css

    Tambahkan file style.css di aplikasi Anda, dan tambahkan gaya CSS berikut. Sekarang, untuk menggunakan file CSS ini, Anda perlu menambahkan link dari file ini ke file HTML Anda.

    1. . .example-enter {
    2. opacity: 01;
    3. }
    4. .example-enter.example-enter-active {
    5. opacity: 1;
    6. transition: opacity 500ms ease-in;
    7. }
    8. .example-leave {
    9. opacity: 1;
    10. }
    11. .example-leave.example-leave-active {
    12. opacity: 01;
    13. transition: opacity 300ms ease-in;
    14. }

    Dalam contoh di atas, durasi animasi ditentukan dalam CSS dan metode render . Ini memberi tahu komponen React kapan harus menghapus kelas animasi dari daftar dan jika keluar kapan harus menghapus elemen dari DOM.

    credit. javatpoint

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.