Come eseguire animazioni jQuery in AngularJs come fade in e fade out

Question

Sono nuovo di AngularJs quindi avevo bisogno di fare quanto segue:

Ho un div e un pulsante, che voglio quando clicco il tasto per fare una chiamata Ajax e quando ho finito voglio fare:

1. Cancellare il div.
2. oppure aggiungerne uno nuovo.

Voglio imparare a fare tutti e due (non con lo stesso scatto ovviamente) con jQuery animazioni (slideUp e slideDown).

Answer 1

È possibile utilizzare ngShow per rendere il seguente jsfiddle basato su angolare.

il codice 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> 

Gli stili 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; 
} 

E infine il codice JavaScript, non dimenticate di includere le librerie angular.js e angular-animate.js

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

I spero che ti aiuti;)

Alternativa-2 si può anche fare animazione utilizzando javascript: -

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

Seguire questo link- http://www.yearofmoo.com/2013/04/animation-in-angularjs.html#how-to-use-animations-in-angularjs