We Keep Coding

Animation transitions behave differently for ng-hide-remove and ng-hide-add

I am trying to animate a <div> to slide-in/out from the left on a button click. I am using the angular framework and ng-showto control the <div> display/visibility, and adding transitions to the ng-hide set of styles.
I have successfully managed to have the div slide in from the left, however I can not get it to slide out (it simply dissappears after the specified delay). I have tried modifying several examples online to get the behavior I am after to no avail.
JSFiddle for anyone that wants to have a look
https://jsfiddle.net/mquinlan/0wcrcwxe/5/

You got that almost right except for removing the left:0 in the selectors for .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove-active.
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
Updated Fiddle: https://jsfiddle.net/vsj62g5r/

AngularJS animation (show/hide) speed

I've created a show/hide animation on my Angular page.
I've used the standard angular-animate.js library, paired with animate.css. AngularJS core is v1.2.20. Everything is working fine, and I'm using it in several occasions.
When the show/hide functions are called, all kinds of classes are added while it's transitioning from a 'show' to a 'hide' state, so you can create some nice css-animations. The thing is, how can you speed this 'classes-adding/removing-transition-thing' up (or slow it down)?
In case someone is wondering what code I use:
My directive HTML:
<div class="datepicker-panel panel panel-square panel-no-border panel-default m-md ng-hide animated"
ng-show="datepicker.show"
ng-class="{'fadeIn':datepicker.show, 'fadeOut':!datepicker.show}"
ng-controller="DatePicker">
<!-- Some HTML -->
</div>
Paired with the following toggle button:
<div class="datepicker-button" ng-click="datepicker.toggle()">
</div>
And the toggle logic in some controller:
$scope.datepicker = { 'show' : false };
$scope.datepicker.toggle = function() {
this.show = !this.show;
}

You might want to look at transitions, the AngularJS docs have an example on that:
.sample-show-hide {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
which as you might imagine describes a 0.5 seconds lasting transition.
https://docs.angularjs.org/guide/animations

Getting done event on CSS Transition with AngularJS 1.2 and angular-animate

Is it possible to get a done event of a CSS Transition with AngularJS 1.2 angular-animate module?
What I try to do is when I have a HTML Tag
<div ng-hide="{{toggle}}">...</div>
with a CSS - Transition like
.sidebar.ng-hide-add,
.sidebar.ng-hide-remove {
transition:0.3s ease-out all;
display:block!important;
}
and the corresponding .ng-hide-add, .ng-hide-remove (and active classes), that I call a function when the 0.3s transition is done.
Thanks!

I stumbled upon this solution - basically it works:
How do I use transitionend in jQuery?
If someone wants to add a more angular-ish solution it would be great!

Leave animation on ng-include with dynamic source

I have a ng-include which is loading content based on a dynamic url (working as expected).
<ng-include class="my-content-area" src="templateUrl"></ng-include>
The problem comes when I'm trying to animate the enter and leave of the content (according to the angular docs, those are the two events ng-include provides for animating on).
.my-content-area.ng-enter,
.my-content-area.ng-leave {
transition: all 500ms;
}
.my-content-area.ng-enter {
opacity:0;
}
.my-content-area.ng-enter.ng-enter-active {
opacity:1;
}
.my-content-area.ng-leave {
opacity:1;
}
.my-content-area.ng-leave.ng-leave-active {
opacity:0;
}
The enter is working as expected, but the leave is not. I am just seeing the content disappear immediately (not fade out) when the templateUrl is changed in my controller.
Any ideas?

I created this plunker with dynamic content, and it works fine.
Try to check it.
I think your problem could be related to the container or the position of the elements.
The initial code was taken from here. There you can find more details about animations in angularjs 1.2+.

Try using:
.my-content-area.ng-leave {
-webkit-transition: all 500ms; /* Safari/Chrome */
transition: all 500ms;
}

Ng animate in angular js

I need to show the div with animated effect .
<div class="appdrawer pull-right tab-{{ showDetails }}" data-ng-click="showDetails = !showDetails; showDetails1 = false; showDetails2 = false;" >Apps</div>
<section id="workbench-apps" data-ng-class="{ 'hidden': ! showDetails }" data-ng-animate=" 'animate' ">
<div class="rowfluid">
Apps
<div class="applist" data-ng-repeat="applist in applists">{{ name }}</div>
</div>
</section>
css
.animate,.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
i tried with above code,but not working ,pls suggest a angular way

As Jon7 mentioned, you can't use ngAnimate with ngClass in Angular 1.1.5. You can use ng-Show though.
Also, in Angular 1.2 ngClass based animations will work. Year of Moo has a great writeup with samples: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

ngAnimate is used (at least in 1.1.5) to add animation to an existing directive. If you check out the ngAnimate documentation, you'll notice a list of supported directives. Use it in conjunction with one of these directives to get an animation.
Also, you're specifying that you want to use an animation called "animate." You'll actually need to define an animation with that name in the CSS.