Làm thế nào để thực hiện hoạt ảnh jQuery trong AngularJs như mờ dần và mờ dần

Question

Tôi mới sử dụng AngularJs nên tôi cần thực hiện như sau:

Tôi có nút div và nút, tôi muốn khi tôi nhấp vào nút thực hiện cuộc gọi ajax và khi tôi hoàn thành, tôi muốn làm:

1. Xóa div.
2. Hoặc thêm mới.

Tôi muốn tìm hiểu cách thực hiện cả hai (không phải với cùng một cú nhấp chuột khóa học) với hoạt ảnh jQuery (slideUp và slideDown).

Answer 1

Bạn có thể sử dụng ngShow để thực hiện các thao tác sau jsfiddle dựa trên góc cạnh.

Mã html:

<div ng-app="App"> 
    Click me: <input type="checkbox" ng-model="checked"><br/> 
    <div class="check-element animate-show" ng-show="checked"> 
     <span class="icon-thumbs-up"></span> I show up when your checkbox is checked. 
    </div> 
    <div class="check-element animate-show" ng-hide="checked"> 
     <span class="icon-thumbs-down"></span> I hide when your checkbox is checked. 
    </div> 
</div> 

Các phong cách CSS

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove { 
    -webkit-transition:all linear 0.5s; 
    -moz-transition:all linear 0.5s; 
    -o-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
    display:block!important; 
} 

.animate-show.ng-hide-add.ng-hide-add-active, 
.animate-show.ng-hide-remove { 
    line-height:0; 
    opacity:0; 
    padding:0 10px; 
} 

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove.ng-hide-remove-active { 
    line-height:20px; 
    opacity:1; 
    padding:10px; 
    border:1px solid black; 
    background:white; 
} 

.check-element { 
    padding:10px; 
    border:1px solid black; 
    background:white; 
} 

Và cuối cùng là mã JavaScript, đừng quên để bao gồm các thư viện angular.js và angular-animate.js

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

tôi hy vọng nó sẽ giúp bạn;)

Alternative-2 Bạn cũng có thể làm phim hoạt hình sử dụng javascript: -

myModule.animation('fade', function() { 
    return { 
    setup : function(element) { 
     element.css({'opacity': 0}); 
    }, 
    start : function(element, done, memo) { 
     element.animate({'opacity': 1}, function() { 
     done(); 
     }); 
    } 
    }; 
}); 

Follow này link- http://www.yearofmoo.com/2013/04/animation-in-angularjs.html#how-to-use-animations-in-angularjs