Animasi JavaScript dalam aplikasi AngularJS

mata teras

AngularJS adalah rangka kerja yang sangat baik untuk membina aplikasi web tunggal halaman, dan sokongan animasinya adalah salah satu ciri utamanya. Animasi JavaScript boleh digunakan untuk menambah kesan animasi kepada aplikasi AngularJS.
Animasi JavaScript sudut adat ditakrifkan dalam kaedah
• modul sudut. Nama animasi bermula dengan titik. animation
Animasi boleh digunakan untuk pelbagai arahan AngularJS, seperti NG-VIEW, NG-REPEAT, NG-HIDE, dan arahan tersuai. Sebagai contoh, anda boleh menambah animasi dalam arahan NG-View untuk membuat kesan visual apabila pengguna beralih antara pandangan; atau menambah animasi dalam arahan NG-REPEAT untuk menunjukkan secara visual apabila perubahan berlaku.
Animasi Walaupun ia boleh menjadikan aplikasi lebih jelas, penggunaan animasi yang terlalu banyak boleh menyebabkan aplikasi melambatkan dan dapat mengatasi pengguna akhir. Oleh itu, animasi harus digunakan dioptimumkan dan strategik.

AngularJS adalah rangka kerja yang kaya dengan ciri untuk membuat aplikasi web satu halaman yang menyediakan semua ciri yang anda perlukan untuk membina aplikasi yang kaya dan interaktif. Salah satu ciri utama Angular adalah sokongan untuk animasi.

kita boleh menghidupkan sebahagian daripada aplikasi untuk menunjukkan perubahan yang berlaku. Dalam jawatan terakhir saya, saya memperkenalkan sokongan untuk animasi CSS dalam aplikasi sudut. Dalam artikel ini, kita akan belajar cara menggunakan JavaScript untuk menambah animasi ke aplikasi AngularJS.

Dalam sudut, satu -satunya perbezaan antara animasi CSS dan JavaScript adalah bagaimana ia ditakrifkan. Tidak ada perbezaan bagaimana animasi yang ditakrifkan digunakan. Pertama, kita perlu memuatkan modul nganimate ke dalam modul akar aplikasi.

angular.module('coursesApp', ['ngAnimate']);

Acara animasi yang akan diproses dalam animasi JavaScript juga tidak berubah. Berikut adalah senarai arahan yang menyokong animasi dan acara mereka untuk operasi yang berbeza:

Arahan peristiwa ng-view Enter, tinggalkan ng-include Enter, tinggalkan ng-switch Enter, tinggalkan ng-if enter, Tinggalkan ng-repeat enter, cuti, bergerak ng-show Tambah, keluarkan ng-hide Tambah, keluarkan ng-class Tambah, keluarkan Senarai di atas adalah sama seperti yang ada dalam jawatan terdahulu, tetapi tidak menyebut kelas CSS yang sepadan kerana kami tidak memerlukannya untuk menentukan animasi JavaScript. Peristiwa -peristiwa ini dijana hanya apabila modul aplikasi memuat modul nganimate. Sekarang mari kita lihat bagaimana menghidupkan beberapa arahan. sintaks sudut tersuai Rangka asas animasi JavaScript adat adalah seperti berikut:

angular.module('coursesApp', ['ngAnimate']);

Semasa menulis animasi JavaScript di AngularJS, ingatlah perkara -perkara berikut:

1. Nama animasi bermula dengan titik (.).
2. Setiap operasi animasi menerima dua parameter:
   • Objek yang merupakan elemen DOM semasa yang akan menggunakan animasi. Jika jQuery tidak dimuatkan sebelum AngularJS dimuatkan, ia adalah objek JQLite;
   • Fungsi panggil balik yang dipanggil selepas animasi selesai. Operasi arahan akan dijeda sebelum memanggil fungsi yang dilakukan.

Kami mempunyai banyak perpustakaan JavaScript seperti JQuery, Greensock, Anima, dan lain -lain, yang memudahkan kerja menulis animasi. Untuk kesederhanaan, saya menggunakan jQuery untuk membuat animasi dalam artikel ini. Untuk mengetahui tentang perpustakaan lain, anda boleh melawat laman web masing -masing.

tambah animasi ke ng-view

animes digunakan untuk arahan NG-View apabila pengguna beralih antara pandangan aplikasi AngularJS. Seperti yang ditunjukkan dalam jadual di atas, kita boleh menambah animasi apabila pandangan memasuki atau daun. Tidak perlu berurusan dengan kedua -dua kes; kita boleh menambah animasi untuk situasi yang kelihatannya perlu.

Animasi berikut akan menghasilkan beberapa kesan visual apabila pandangan memasuki halaman:

angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});

Kod di atas akan membuat kesan gelongsor apabila paparan memasuki halaman. Kaedah yang dilakukan diluluskan sebagai panggilan balik. Ini adalah untuk menunjukkan bahawa animasi selesai dan rangka kerja kini boleh diteruskan ke operasi seterusnya.

Sila ambil perhatian bagaimana kaedah animate() dipanggil. Kami tidak perlu menukar elemen ke objek jQuery, kerana perpustakaan jQuery dimuatkan sebelum AngularJS dimuatkan.

Sekarang kita perlu memohon animasi ini ke Arahan NG-View. Walaupun animasi ditakrifkan dalam JavaScript, dengan konvensyen kami menggunakan kelas pada arahan sasaran untuk memohonnya.

courseAppAnimations.animation('.view-slide-in', function () {
  return {
    enter: function(element, done) {
      element.css({
        opacity: 0.5,
        position: "relative",
        top: "10px",
        left: "20px"
      })
      .animate({
        top: 0,
        left: 0,
        opacity: 1
        }, 1000, done);
    }
  };
});

tambah animasi ke ng-repeat

NG-Repeat adalah salah satu arahan yang paling penting, yang menyediakan banyak pilihan. Dua operasi asas arahan ini adalah penapisan dan penyortiran. Bergantung pada jenis operasi yang dilakukan, item di bawah arahan akan ditambah, dipadam, atau dipindahkan.

mari kita gunakan beberapa animasi asas supaya pengguna dapat melihat apabila perubahan berlaku.

<div class="view-slide-in" ng-view=""></div>

tambah animasi ke ng-hide

Arahan

ng-hide menambah atau membuang kelas CSS NG-Hide pada elemen sasaran. Untuk memohon animasi, kita perlu mengendalikan situasi di mana kita menambah dan memadam kelas CSS. Nama kelas akan dihantar ke kelas pengendali animasi. Ini membolehkan kami menyemak kelas dan mengambil tindakan yang sesuai.

Berikut adalah contoh kod animasi yang memudar atau memudar ke unsur-unsur apabila arahan NG-Hide diaktifkan atau dinyahaktifkan:

courseAppAnimations.animation('.repeat-animation', function () {
  return {
    enter : function(element, done) {
      console.log("entering...");
      var width = element.width();
      element.css({
        position: 'relative',
        left: -10,
        opacity: 0
      });
      element.animate({
        left: 0,
        opacity: 1
      }, done);
    },
    leave : function(element, done) {
      element.css({
        position: 'relative',
        left: 0,
        opacity: 1
      });
      element.animate({
        left: -10,
        opacity: 0
      }, done);
    },
    move : function(element, done) {
      element.css({
        left: "2px",
        opacity: 0.5
      });
      element.animate({
        left: "0px",
        opacity: 1
      }, done);
    }
  };
});

tambah arahan adat animasi

Untuk menambah animasi kepada arahan tersuai, kita perlu menggunakan perkhidmatan $animate. Walaupun $animate adalah sebahagian daripada kerangka teras AngularJS, nganimate harus dimuatkan untuk memanfaatkan perkhidmatan tersebut.

Dengan demo yang sama seperti dalam jawatan terdahulu, kami akan memaparkan halaman dengan senarai kursus. Kami membuat arahan yang memaparkan butiran kursus dalam kotak, dan selepas mengklik pautan "Lihat Statistik", kandungan kotak akan berubah. Mari tambahkan animasi supaya pengguna dapat melihat peralihan.

Apabila peralihan berlaku, kami akan menambah kelas CSS, yang akan kami padamkan selepas animasi selesai. Inilah kod untuk arahan ini:

angular.module('coursesApp', ['ngAnimate']);

Seperti yang anda lihat, kami melakukan tindakan selepas animasi selesai. Apabila memeriksa elemen arahan dalam alat pemaju penyemak imbas, kami akan melihat bahawa kelas beralih-aktif dan menukar-tambah ditambah dan dikeluarkan dengan cepat. Kami boleh menentukan peralihan CSS atau menyesuaikan animasi JavaScript untuk melihat animasi yang sedang berlaku. Berikut adalah contoh peralihan CSS yang boleh digunakan dengan arahan di atas (untuk keringkasan, awalan vendor ditinggalkan):

angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});

atau, berikut adalah animasi jQuery yang boleh digunakan untuk arahan yang sama:

courseAppAnimations.animation('.view-slide-in', function () {
  return {
    enter: function(element, done) {
      element.css({
        opacity: 0.5,
        position: "relative",
        top: "10px",
        left: "20px"
      })
      .animate({
        top: 0,
        left: 0,
        opacity: 1
        }, 1000, done);
    }
  };
});

Salah satu daripada animasi ini boleh digunakan untuk arahan tersuai sama seperti kami menggunakan animasi kepada arahan terbina dalam.

<div class="view-slide-in" ng-view=""></div>

anda boleh melihat kesan sebenar semua animasi di atas pada halaman demo.

Kesimpulan

Animasi boleh menjadikan aplikasi lebih jelas jika digunakan dengan betul dan berfungsi. Seperti yang dapat kita lihat, AngularJS menyokong animasi CSS dan JavaScript dengan kaya. Anda boleh memilih salah satu daripada ini berdasarkan keadaan pasukan.

Walau bagaimanapun, penggunaan animasi yang berat boleh menyebabkan permohonan itu diperlahankan dan aplikasi itu nampaknya akan direka dengan overder untuk pengguna akhir. Oleh itu, senjata ini mesti digunakan dengan berhati -hati dan pengoptimuman.

Soalan Lazim Mengenai Animasi JavaScript dalam Aplikasi AngularJS (FAQ)

Bagaimana untuk membuat animasi asas di AngularJS?

Mewujudkan animasi asas dalam AngularJS melibatkan beberapa langkah. Pertama, anda perlu memasukkan perpustakaan animasi AngularJS dalam projek anda. Ini boleh dicapai dengan menambahkan rujukan kepada fail "Angular-Animate.js" dalam fail HTML. Seterusnya, anda perlu menyuntik modul "nganimate" ke dalam aplikasi AngularJS anda. Ini boleh dicapai dengan menambahkan "nganimate" sebagai kebergantungan dalam modul permohonan. Selepas anda melakukan ini, anda boleh membuat animasi menggunakan kelas CSS dan Arahan AngularJS. Sebagai contoh, anda boleh menggunakan kelas "NG-Enter" dan "NG-Leave" untuk menghidupkan elemen apabila ia memasuki atau meninggalkan DOM.

Apakah komponen utama animasi AngularJS?

Animasi AngularJS terutamanya terdiri daripada dua komponen utama: CSS dan JavaScript. CSS digunakan untuk menentukan gaya dan peralihan animasi, manakala JavaScript digunakan untuk mengawal masa dan susunan animasi. Dalam AngularJS, animasi dicipta dengan mengaitkan kelas CSS dengan arahan AngularJS tertentu seperti "NG-Repeat", "NG-Switch", dan "NG-View". Arahan ini secara automatik menambah dan memadam kelas CSS yang berkaitan pada masa yang tepat, membolehkan anda membuat animasi kompleks dengan kod JavaScript yang minimum.

Bagaimana untuk mengawal masa animasi di AngularJS?

peralihan dan animasi CSS boleh digunakan untuk mengawal masa animasi dalam AngularJS. Dengan menentukan atribut "peralihan" atau "animasi" dalam kelas CSS, anda boleh mengawal berapa lama animasi berlangsung. Di samping itu, anda boleh menggunakan atribut "peralihan-delay" atau "animasi-delay" untuk mengawal masa permulaan animasi. Ciri -ciri ini boleh ditentukan dalam beberapa saat atau milisaat (MS).

Bolehkah saya membuat animasi dalam angularjs menggunakan javascript?

Ya, anda boleh membuat animasi dalam AngularJS menggunakan JavaScript. Walaupun CSS sering digunakan untuk animasi mudah, JavaScript boleh digunakan untuk animasi yang lebih kompleks yang memerlukan kawalan yang tepat terhadap masa dan susunan animasi. Dalam AngularJS, anda boleh mengendalikan animasi secara programatik menggunakan perkhidmatan "$ animate". Perkhidmatan ini menyediakan kaedah untuk menambah, memadam, dan menanyakan kelas CSS, yang membolehkan anda membuat animasi kompleks menggunakan JavaScript.

bagaimana menghidupkan unsur -unsur ketika memasuki atau meninggalkan dom di angularjs?

Dalam AngularJS, anda boleh menggunakan kelas "NG-Enter" dan "NG-Leave" untuk menghidupkan elemen apabila ia memasuki atau meninggalkan DOM. Angularjs secara automatik menambah dan membuang kelas ini apabila elemen memasuki atau meninggalkan DOM. Dengan menentukan peralihan CSS atau animasi untuk kelas ini, anda boleh membuat animasi yang mencetuskan apabila elemen memasuki atau meninggalkan DOM.

Bagaimana menggunakan animasi AngularJS dengan "ng-repeat"?

Anda boleh menggunakan animasi AngularJS dengan "NG-Repeat" dengan mengaitkan kelas CSS dengan arahan "NG-Repeat". Apabila item ditambah atau dikeluarkan dari senarai 'NG-Repeat', AngularJS secara automatik menambah dan menghilangkan kelas CSS yang berkaitan, mencetuskan animasi yang sepadan. Sebagai contoh, anda boleh menggunakan kelas "NG-Enter" dan "NG-Leave" untuk menghidupkan projek apabila ditambah atau dikeluarkan dari senarai.

Bolehkah saya menggunakan animasi AngularJS dengan "ng-switch"?

Ya, anda boleh menggunakan animasi AngularJS dengan "NG-Switch". Sama seperti "NG-Repeat", anda boleh mengaitkan kelas CSS dengan arahan "NG-Switch" untuk membuat animasi. Apabila keadaan "NG-Switch" berubah, AngularJs secara automatik menambah dan memadam kelas CSS yang berkaitan, mencetuskan animasi yang sepadan.

Bagaimana menggunakan animasi AngularJS dengan "ng-view"?

Anda boleh menggunakan animasi AngularJS dengan "ng-view" dengan mengaitkan kelas CSS dengan arahan "NG-View". Apabila pandangan berubah, AngularJs secara automatik menambah dan memadam kelas CSS yang berkaitan, mencetuskan animasi yang sepadan. Ini boleh digunakan untuk membuat animasi peralihan halaman dalam aplikasi AngularJS.

Bolehkah saya menggunakan animasi AngularJS dengan arahan tersuai?

Ya, anda boleh menggunakan animasi AngularJS dengan arahan tersuai. Dengan menggunakan perkhidmatan "$ animate" dalam fungsi pautan arahan, anda boleh menambahkan, memadam, dan menanyakan kelas CSS secara pemrograman untuk membuat animasi kompleks menggunakan JavaScript.

bagaimana debug animasi angularjs?

Anda boleh menggunakan alat pemaju penyemak imbas untuk debug animasi angularjs. Dengan menyemak unsur -unsur animasi di DOM, anda dapat melihat kelas CSS angularjs menambah dan mengeluarkan. Di samping itu, anda boleh mengaktifkan atau melumpuhkan animasi menggunakan kaedah "Enabled" perkhidmatan "$ animate", yang sangat berguna untuk debugging.

Atas ialah kandungan terperinci Animasi JavaScript dalam aplikasi AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!