Kod untuk melaksanakan beberapa kesan animasi dalam AngularJS applications_AngularJS

Dalam Angular, satu-satunya perbezaan antara CSS dan JavaScript ialah takrifannya. Tiada perbezaan yang menghalang animasi yang ditakrifkan daripada digunakan. Pertama, kita perlu memuatkan modul ngAnimate ke dalam modul root aplikasi kita.

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

Semua acara animasi JavaScript yang akan dikendalikan kekal tidak berubah. Berikut ialah senarai animasi yang disokong secara langsung dan gelagat berbeza yang sepadan:

Set acara perintah

• ng-view
• ng-include
• ng-suis
• ng-jika masukkan
• pergi
• ng-ulang masukkan
• pergi
• bergerak
• ng-show
• ng-sorok
• tambah kelas ng
• alih keluar

Senarai di atas adalah sama seperti artikel sebelumnya, tetapi kelas CSS yang sepadan tidak disebut kerana kami tidak memerlukannya untuk mentakrifkan animasi JavaScript. Semua peristiwa ini hanya akan dijana selepas modul aplikasi memuatkan modul ngAnimate. Sekarang mari kita lihat cara membuat arahan ini berfungsi.
Sintaks untuk menyesuaikan animasi Sudut

Berikut ialah rangka kerja asas untuk animasi JavaScript tersuai:

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

Berikut adalah beberapa perkara penting yang perlu diingat semasa menulis animasi JavaScript dalam AngularJS:

• Nama animasi bermula dengan titik (.)
• Semua tingkah laku animasi menerima dua parameter:
• Objek dalam elemen DOM semasa yang akan dianimasikan ialah sama ada objek jQlite yang dimuatkan sebelum jQuery memuatkannya sebelum AngularJS atau objek jQuery.
• Fungsi panggil balik apabila animasi tamat. Tindakan yang sepadan dengan arahan digantung sehingga fungsi panggil balik dipanggil.

Kami mempunyai beberapa perpustakaan JavaScript seperti jQuery, Greensock, Anima dan beberapa lagi yang memudahkan penulisan animasi. Untuk memastikan perkara mudah, saya menggunakan jQuery untuk mencipta animasi dalam siaran ini. Untuk mengetahui tentang beberapa perpustakaan lain, anda boleh melawati tapak web mereka yang sepadan.

Biarkan ng-view bergerak

Animasi yang digunakan pada arahan ng-view berjalan apabila menukar paparan dalam aplikasi AngularJS.

Berikut ialah kesan visual yang disebabkan oleh animasi apabila paparan dipaparkan:

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);
 }
 };
});

Perkara di atas mencipta kesan slaid masuk apabila paparan memasuki skrin. Kaedah yang dilakukan dihantar sebagai fungsi panggil balik. Ini adalah untuk menunjukkan bahawa animasi telah tamat dan kini rangka kerja AngularJS boleh diteruskan dengan tindakan seterusnya.

Perhatikan kaedah di mana kaedah animate() dipanggil. Kami tidak perlu menukar elemen ini menjadi objek jQuery kerana jQuery dimuatkan sebelum AngularJS dimuatkan.

Sekarang kita perlu menggunakan kesan animasi ini pada arahan ng-view. Walaupun animasi ditakrifkan dalam JavaScript, mengikut konvensyen kami menggunakan teg kelas untuk menerapkannya pada arahan sasaran.

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

animasi ng-ulang
Antara arahan yang anda boleh pilih untuk digunakan, ng-repeat adalah arahan yang sangat penting. Terdapat dua arahan operasi asas: penapisan dan pengisihan. Tambah, alihkan atau alih keluar arahan yang sepadan berdasarkan operasi yang dilakukan.
Demonstrasi berikut menggunakan beberapa animasi asas Apabila perubahan berlaku, anda boleh melihat kesan animasi yang sepadan.

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);
 }
 };
});

Animasi Ng-sembunyikan

Arahan ng-hide digunakan untuk menambah atau mengalih keluar kelas gaya ng-hide elemen sasaran. Untuk menggunakan animasi, kita selalunya perlu menambah atau mengalih keluar gaya css. Hantar nama kelas kepada kelas animasi untuk mencapai kesan ini. Ini membolehkan kami memeriksa kelas dan membuat perubahan yang sesuai pada kod.

Berikut ialah kod sampel animasi yang menggunakan arahan ng-hide untuk mencapai kesan fade-out elemen:

courseAppAnimations.animation('.hide-animation', function () {
 return {
 beforeAddClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.animate({
   opacity: 0
  },500, done);
  } else {
  done();
  }
 },
 removeClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.css('opacity',0);
  element.animate({
   opacity: 1
  }, 500, done);
  } else {
  done();
  }
 }
 };
});

Biarkan perintah tersuai dimainkan

Untuk menghidupkan arahan tersuai, kami perlu menggunakan perkhidmatan $animate. Walaupun perkhidmatan $animate adalah sebahagian daripada rangka kerja teras AngularJS, ngAnimate perlu dimuatkan untuk perkhidmatan ini memainkan peranan sepenuhnya.

Menggunakan contoh yang sama daripada artikel sebelumnya, kami akan membentangkan senarai kursus satu halaman. Kami mencipta arahan untuk memaparkan butiran kursus dalam grid, dan kandungan grid akan berubah apabila pautan "Lihat Statistik" diklik. Mari tambahkan animasi untuk mempersembahkan peralihan ini kepada pengguna.

Apabila animasi peralihan bermula, kami akan menambah teg kelas CSS dan apabila ia tamat, alih keluar teg kelas. Berikut ialah contoh kod untuk arahan ini:

app.directive('courseDetails', function ($animate) {
  return {
  scope: true,
  templateUrl: 'courseDetails.html',
  link: function (scope, elem, attrs) {
   scope.viewDetails = true;
   elem.find('button').bind('click', function () {
   $animate.addClass(elem, "switching", function () {
    elem.removeClass("switching");
    scope.viewDetails =! scope.viewDetails;
    scope.$apply();
  });
  });
 }
 };
});

正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：

.det-anim.switching {
 transition: all 1s linear;
 position: relative;
 opacity: 0.5;
 left: -20px;
}

又或者，这里有一个jQuery写的动画，可以用于同样的指令：

courseAppAnimations.animation('.js-anim', function () {
 return {
 beforeAddClass: function(element, className, done) {
  if (className === 'switching') {
  element.animate({
   opacity: 0
  },1000, function (){
   element.css({
   opacity: 1
   });
   done();
  });
  }
  else {
  done();
  }
 }
 }
});

这些动画当中，如果它可以应用于内建的指令上，它同样也可以被应用到自定义的指令上：

<div course-details 
  class="det-anim"
  title="{{course.title}}">
</div>

你可以在示例页面看到以上所有的动画运行时的效果。
 
结论

动画，当被适合并正常的运用时，将给应用程序带来生气。正如我们所看到的，AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。

但是，使用太多的动画将会使得应用程序变得缓慢，而对于用户来，这将使应用程序看起来i不够人性化。所以，必须小心并最优化的使用这件利器。