I am developing a angular app where i am using animation in ng-show attribute on button click to show and hide a div element .It works fine in the hide case but it does not work fine in show case it immediately shows the element without the animation.You can see the same behavior in the example
:http://yearofmoo-articles.github.io/angularjs-animation-article/app/#/ng-show-hide .
My Code is
<div class="row-fluid">
<button class="btn btn-large btn-success pull-right" type="button" ng-click="showtravelSchedule=!showtravelSchedule">Search</button>
</div>
<div class=" span3 module offset1 community-bulletin" ng-show="showtravelSchedule" ng-animate="{show: 'example-show', hide: 'example-hide'}">
</div>
and css is
.example-show, .example-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.example-show {
opacity:0;
}
.example-show.example-show-active {
opacity:1;
}
.example-hide {
opacity:1;
}
.example-hide.example-hide-active {
opacity:0;
}
I refactored it a bit, and it seems to be working with this setup:
.example-show, .example-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.example-show.example-show-active,
.example-hide {
opacity:1;
}
.example-hide.example-hide-active,
.example-show {
opacity:0;
}
Not sure why it makes a difference.
Related
In this plunk I have an Angular animation that shows up and slides in a div from the right. What I need is a 'drawer' effect where the div edge is shown for the user to click on it, and only then the div will slide in. This means that initially the div should be partially shown. Since the original animation is done from hide to show (instead of from show to show) I don't know how to approach this. Any ideas?
CSS:
.panel{
position: fixed;
top: 10px;
right: -2px;
}
.panel.ng-hide {
right: -200px;
}
.panel.ng-hide-add, .panel.ng-hide-remove {
/* this is required as of 1.3x to properly
apply all styling in a show/hide animation */
transition: 0s linear all;
}
.panel.ng-hide-add-active, .panel.ng-hide-remove-active {
/* -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
*/
transition: all ease-in-out 2s;
}
.panel.ng-show-add-active {
display: block;
}
HTML:
Show <input type="checkbox" ng-model="checked" />
<div class="panel" ng-show="checked"
style="border:1px solid #dddddd;background:orange;width:200px">
<input type="checkbox" /> Charts <br />
<input type="checkbox" /> Reports <br />
<input type="checkbox" /> Files <br />
</div>
If you want something like the SideNav on Android, you should try Angular Material and use the already implemented SideNav instead of creating your own.
If not, try to translate the div by adding this to your CSS:
div {
transform: translate(-50px,0px);
}
i am tying to achieve an Animation in Angular JS 1.4.0, which i'd like to be similar to the one, which can be found on this page (Angular 1.1.5):
http://www.nganimate.org/angularjs/ng-repeat/move
As I understand, there have been major changes to ngAnimate over the last few Versions.
I have recreated the important Part of my application with Plunkr. It can be found here http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview
I want the Items, that show and hide, because of a different filter input, to be animated with a css animation.
This is my filter input:
<input type="text" class="form-control" ng-model="search">
And this is the list, in which all the Elements from the search show up.
<ul>
<li ng-class="item" ng-repeat="name in people | filter:search">
{{name.name}}
</li>
</ul>
Here are my CSS animations:
.item.ng-enter,
.item.ng-leave
{
-webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.item.ng-enter.item.ng-enter-active,
.item.ng-leave {
opacity: 1;
top: 0;
height: 30px;
}
.item.ng-leave.item.ng-leave-active,
.item.ng-enter {
opacity: 0;
top: -50px;
height: 0px;
}
The search and filters work fine, but the CSS animations are not triggered.
I would be very glad, if someone had a solution to this problem!
The latest version like angular 1.4 the approach is bit different. First of all you should include angular animate js.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>
Then you should inject 'ngAnimate' to module like this.
var app = angular.module('myApp', ['ngAnimate']);
also use class like this in along with ng-reapeat
<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
also use css for animate like below
.animate-repeat {
line-height:40px;
list-style:none;
box-sizing:border-box;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity:0;
max-height:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
max-height:40px;
}
more references
In this plunk I am trying to have a div slide in from the right side, then slide back to hide. Clicking on the checkbox shows/hides the div.
I almost made this work, I cannot make the transition to slide, the div just shows up and hides without transitioning. Any ideas?
HTML:
Show <input type="checkbox" ng-model="checked">
<div class="panel" ng-show="checked" style="border:1px solid #dddddd;background:orange;width:200px">
<input type="checkbox"> Charts
<br/>
<input type="checkbox"> Reports
<br/>
<input type="checkbox"> Files
<br/>
</div>
CSS:
.panel{
position: fixed;
top: 10px;
right: -2px;
}
.panel.ng-show-add {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}
.panel.ng-show-add-active {
display: block;
}
Firstly, to use ngShow animations, you need ngAnimate, so I added that.
I also updated the plunker to use a newer version of angular for the sake of ease and compatibility. If you are using an older version of angular, just use the appropriate version of ngAnimate.
You need this to make it apply the styles correctly (per the docs):
.panel.ng-hide-add, .panel.ng-hide-remove {
/* this is required as of 1.3x to properly
apply all styling in a show/hide animation */
transition: 0s linear all;
}
Then you need to make sure you apply your transitions to the active add and active remove for hide:
.panel.ng-hide-add-active, .panel.ng-hide-remove-active {
/* -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
*/
transition: all ease-in-out 2s;
}
Note that I left your cubic-bezier transitions in there for reference, but have them commented out just to get things working.
I then added a hidden (start) position for it.
.panel.ng-hide {
right: -200px;
}
So...not sure if this works for you, but you said you needed it to slide, so it does that. Not sure why you need the cubic-bezier transition for that, though I am not that familiar with it.
Animation Demo
As an aside, angular doesn't animate through an ng-show class, it does it through ng-hide, thus the ng-hide-remove/ng-hide-add and the -active versions of those classes. It may be confusing if you try to use those and wonder why things aren't working. It's because they don't get used.
I can't get animations to work for ng-show only.
This works to fade out and fade in:
.animate-show {
display: block !important;
-webkit-transition:all linear 1.5s;
transition:all linear 1.5s;
}
.animate-show.ng-hide {
opacity:0;
}
<div ng-show="match.userId" style="margin-right: auto; margin-left: auto;" class="padding animate-show ng-hide">
...
</div>
I want to fade IN only.... no animation on hide. This doesn't work
.animate-show {
display: block !important;
}
.animate-show.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all linear 1.5s;
transition:all linear 1.5s;
}
.animate-show.ng-hide {
opacity:0;
}
Here's a plunkr:
http://plnkr.co/edit/9KNqt5TAZ8Ejy8eeJUQs
.animate-show.ng-hide-remove.ng-hide-remove-active {
ng-hide-remove-active is too late, you only need ng-hide-remove.
Working plunker
First time trying to use angular animations and can't work out what I'm doing wrong.
I'm using AngularJS v1.3.0-build.2805 for both Angular itself and Animation module.
-1. Module is included
angular.module('profileApp', [
'ngAnimate'
]);
-2. Defining styles in css
.fade-in{
transition: 1s linear all;
-webkit-transition: 1s linear all;
}
.fade-in.ng-enter,
.fade-in.ng-leave.ng-leave-active{
opacity: 0;
}
.fade-in.ng-enter.ng-enter-active,
.fade-in.ng-leave{
opacity: 1;
}
-3. Including class in ng-repeat
<a class="item fade-in" ng-repeat="item in collection" href="{{client.getPath('product/'+item.slug)}}">
<div class="thumb">
<img ng-src="{{item.images[0].imagename}}" alt="{{item.style_name}}">
</div>
<h3>{{item.style_name}}</h3>
</a>
What am I missing here??
Here's a great tutorial about staggering animation in angularjs, by yearofmoo
as stated in the comments to your question,by pixelbits:
If you want to stagger the animation on load, then you have to push items into your array rather than assign the entire array to scope.
he also provided a nice plunkr that shows how to properly make the animation.
list.html
<div id="list-wrap">
<ul id="page-list">
<li class="page-list-item" ng-repeat="item in items" ng-click="tapHandle(this)">
<span class="page-list-text">{{ item }}</span>
</li>
</ul>
</div>
style.css:
.page-list-item.ng-enter-stagger,
.page-list-item.ng-leave-stagger {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transition-duration: 0;
-moz-transition-duration: 0;
-ms-transition-duration: 0;
-o-transition-duration: 0;
transition-duration: 0;
}
.page-list-item.ng-enter {
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-ms-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all;
-ms-opacity: 0;
opacity: 0;
}
.page-list-item.ng-enter.ng-enter-active {
-ms-opacity: 1;
opacity: 1;
}
.page-list-item.ng-leave {
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-ms-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all;
-ms-opacity: 1;
opacity: 1;
}
.page-list-item.ng-leave.ng-leave-active {
-ms-opacity: 0;
opacity: 0;
}