Sử dụng hiệu ứng động với ngAnimate trong AngularJS

• Các hiệu ứng slide và flick trong khi chuyển đổi giữa các màn hình thường xuất hiện trong các trò chơi trước đây, tuy nhiên với sự ra đời của các thiết bị đầu cuối di động hiện nay đã làm cho các hiệu ứng này trở nên quen thuộc.
• Tuy nhiên việc trở nên quen thuộc không có nghĩa là dễ dàng để đưa các hiệu ứng cồng kềnh vào trong hành động. Và ngAnimate trong AngularJS đã xuất hiện để giải quyết vấn đề trên, bằng cách coi hiệu ứng như một thiết kế khác và viết bằng CSS
• Tôi sẽ hướng dẫn các bạn cách tạo một hiệu ứng đơn giản bằng cách sử dụng ngAnimate.
• Đầu tiên là môi trường để sử dụng, chúng ta sẽ phải cài đặt thư viện angular.js và angular-animate.js
• //cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js
• //code.angularjs.org/1.3.14/angular-animate.js
• Tiếp theo là khai báo module : angular.module("animationApp", ['ngAnimate']);
• Tiếp theo sẽ là định nghĩa các lớp CSS sẽ sử dụng :
• .class_name.ng-enter {} / * enter processing of start value * /
• .class_name.ng-enter-active {} / * enter treatment of end value * /
• .class_name.ng-leave {} / * leave processing of the start value * /
• .class_name.ng-leave-active {} / * leave processing exit values ​​* /
• Sau khi đã khai báo CSS, bằng việc sử dụng <Class Div ng-view = "class_name"> Animate! </ Div> chúng ta đã có thể tạo ra 1 lớp DOM được ghép các hiệu ứng như trong CSS đã khai báo.

Chúng ta cũng cần lưu ý các directive được hỗ trợ hiệu ứng

• ngRepeat enter, leave and move
• ngView enter and leave
• ngInclude enter and leave
• ngSwitch enter and leave
• ngIf enter and leave
• ngClass add and remove
• ngShow & ngHide add and remove (the ng-hide class value)

Các bạn có thể theo dõi 1 đoạn code mẫu tại đây http://codepen.io/dangtuanhung/pen/Wvdevb

Thông tin tham khảo thêm :

• https://code.angularjs.org/1.2.5/docs/api/ngAnimate
• http://www.nganimate.org/
• https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_transitions
• http://webdev-nekodama.xii.jp/css/pDetail.php?g=animations&p=animation-timing-function&v=ease-in