Animasi JavaScript dalam aplikasi AngularJS

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

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.

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