Animasi AngularJS


AngularJS menyediakan kesan animasi yang boleh digunakan dengan CSS.

Untuk menggunakan animasi dalam AngularJS, anda perlu mengimport pustaka angular-animate.min.js. 

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

Anda juga perlu menggunakan model ngAnimate dalam aplikasi anda: 

<body ng-app="ngAnimate">

Apakah animasi?

Animasi ialah kesan dinamik yang dihasilkan dengan menukar elemen HTML.

Instance

Tandakan kotak pilihan untuk menyembunyikan DIV:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Note应用中动画不宜太多，但合适的使用动画可以增加页面的丰富性，也可以更易让用户理解。

Jika aplikasi kami telah menetapkan nama aplikasi, kami boleh menambah ngAnimate terus pada model:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Apakah yang dilakukan ngAnimate?

Model ngAnimate boleh menambah atau mengalih keluar kelas.

Model ngAnimate tidak boleh menghidupkan elemen HTML, tetapi ngAnimate akan memantau acara, seperti menyembunyikan dan memaparkan elemen HTML Jika peristiwa berlaku, ngAnimate akan menggunakan kelas yang telah ditetapkan untuk menghidupkan elemen HTML.

Arahan AngularJS untuk menambah/mengalih keluar kelas:

  • ng-show

  • ng-hide

  • ng-class

  • ng-view

  • ng-include

  • < 🎜 dan Arahan

    digunakan untuk menambah atau mengalih keluar nilai kelas ng-repeat.

    • Arahan lain akan menambah kelas
  • apabila memasuki DOM dan atribut

    akan ditambahkan apabila mengalih keluar DOM. ng-if

    Apabila kedudukan elemen HTML berubah, arahan
    • juga boleh menambah kelas
  • .

    ng-switch Selain itu, koleksi kelas elemen HTML akan dialih keluar selepas animasi selesai. Contohnya: Perintah

    akan menambah kelas berikut:

ng-showng-hideng-hide

ng-enterng-leave

ng-repeat ng-move

(jika elemen akan disembunyikan)

ng-hide

  • (jika elemen akan ditunjukkan)

    ng-animate

  • ( Jika elemen akan disembunyikan)

    ng-hide-animate

  • (Jika elemen akan ditunjukkan)

    ng-hide-add

  • Gunakan animasi CSS

    ng-hide-remove Kami boleh menggunakan peralihan CSS atau animasi CSS untuk menghidupkan elemen HTML Untuk bahagian ini, anda boleh merujuk kepada tutorial peralihan CSS dan tutorial animasi CSS kami.

  • Peralihan CSS

    ng-hide-add-activePeralihan CSS membolehkan kami menukar satu nilai sifat CSS dengan lancar kepada yang lain:

  • Contoh

    ng-hide-remove-active Apabila DIV elemen ditetapkan kepada kelas

    , peralihan mengambil masa 0.5 saat dan ketinggian berubah daripada 100px kepada 0:
Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

CSS Animation

.ng-hideCSS Animation membenarkan anda mengubah suai Sifat CSS dengan lancar Nilai:

Instance

Apabila kelas
ditetapkan pada elemen DIV, animasi
akan dilaksanakan dan ia akan menukar ketinggian dengan lancar daripada 100px hingga 0:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@keyframes myChange {
  from {
      height: 100px;
  } to {
      height: 0;
  }
}

div {
  height: 100px;
  background-color: lightblue;
}

div.ng-hide {
  animation: 0.5s myChange;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

隐藏 DIV: <input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck">
</div>


</body>
</html>

Jalankan contoh »

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian