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.
Related
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/
On my angular js site I have angular-animate lodaed and deployed (in the inspector I see angular-animate.js in the js folders so I know its loading. What I want to do is have my header animate on page load so I have added the following to my project
template.html
<header id="header" ng-animate=" 'animate' ">
</header>
style.css
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
The issue being is no animation occurs when I click from the home link and load "template.html" Is there something I am missing here??
As per the Angular documentation:
The directives that support animation automatically are: ngRepeat,
ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass. Custom
directives can take advantage of animation by using the $animate
service.
You need to use one of these directives in your header tag.
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
I can't understand how to get my ngAnimate to work with this view:
http://plnkr.co/edit/5eW6aN?p=preview
I am expecting the links containing the word "Link" to make the grey box slide out.
Thanks for any help.
ng-animate attribute is deprecated in 1.2.
In 1.2 you define the appropriate CSS classes using a special naming convention. If you want a specific name like 'animation', you need to add that class to the element you want to animate.
As long as you have the correct CSS classes, some directives will be animated automatically. Which ones can be found here: http://docs.angularjs.org/api/ngAnimate
This is the reason your animation works in your second example when just defining the ".ng-enter" class. This would however automatically animate all directives that support the enter animation.
I have updated your first example to make it work with the class named 'animation':
HTML:
<li ng-repeat="item in items" class="animation">{{item}}</li>
With CSS:
.animation {
-webkit-transition: 1s;
}
.animation.ng-enter {
opacity: 0;
}
.animation.ng-leave {
opacity: 1;
}
.animation.ng-enter.ng-enter-active {
opacity: 1;
}
.animation.ng-leave.ng-leave-active {
opacity: 0;
}
see this Plunker: http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview
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!