I have been trying to work out how to animate just a nested a view using ui-router. But all attempts have failed. What I am trying to do is just fade in the nested view called body I don't want to animate the header. I have made this example as small as possible. I recognize that if restructured my code to not be nested I would not have this issue but in production I need to have this nested.
here is my scss and html.
#mainView.ng-enter {
.nested-view-animate {
position: absolute;
left: 0;
right: 0;
-webkit-transition: all 1s ease-in-out;
}
}
#mainView.ng-enter-active {
.nested-view-animate {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
}
}
#mainView.ng-leave {
.nested-view-animate {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
}
}
#mainView.ng-leave-active {
.nested-view-animate {
opacity: 0;
-webkit-transition: all 1s ease-in-out;
}
}
This is my html
<div ui-view id="mainView">
<!-- below is what is included dynamically -->
<div>
<div ui-view="header"></div>
<!-- I want to animate when the content in here is loaded-->
<div ui-view="body" class="nested-view-animate"></div>
</div>
</div>
Again all I am trying to do is fade in new content into the "body" and fade out the old stuff.
I am getting the class ng-animate applied to the directive but I'm not getting:
ng-hide-remove.ng-hide-remove-active or .ng-hide-remove.ng-hide-remove-active
I have angular and angular-animate 1.3 loaded. and am including ngAnimate in app.js
<div class="message animate-show {{message.type}}" ng-show="message">
{{message.text}}
</div>
The transitions are not happening:
.message.animate-show {
line-height:20px;
opacity:1;
padding:10px;
&.ng-hide-add.ng-hide-add-active,
&.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
&.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
}
}
For a simple animation like fading in/out, you need the following CSS classes:
.my-animation {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
opacity: 1;
}
.my-animation.ng-hide {
opacity: 0;
}
UPDATE:
If you have other transistion on the element that you don't want to get affected, use the following CSS definitions to only apply the transistions on the fading in/out:
.my-animation {
opacity: 1;
}
.my-animation.ng-hide {
opacity: 0;
}
.my-animation.ng-hide-add,
.my-animation.ng-hide-remove {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
See, also, this short demo.
ExpertSystem's answer above is correct. However, if you still cannot get animation to work in Angular then you need to ensure that the ngAnimate module is added to your app:
The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks.
See Source:
https://docs.angularjs.org/api/ngAnimate
This can be done in your code that defines your AngularJS app as follows:
var app = angular.module('myApp', ['ngAnimate']);
I am new to angularjs. I am trying angularjs with rails (using "angularjs-rails" gem). I am having trouble using ngAnimate. The functionality works fine i.e. angular is properly installed and "addEntry" function adds up the new entry, but animation is not working. I am not sure what I am missing here.
app = angular.module("MyApp", ['ngAnimate'])
#MainCtrl = ($scope) ->
$scope.entries = [{name: "Dummy1"}, {name: "Dummy2"}]
$scope.addEntry = ->
$scope.entries.push({name: "Dummy3"})
Here is the html file:
<div ng-controller="MainCtrl">
<button ng-click="addEntry()"></button>
<div ng-repeat="entry in entries" ng-animate="'demo'">
<a>{{entry.name}}</a>
</div>
</div>
Here is CSS to support ngAnimate:
.demo-enter {
-webkit-transition: all 1s linear;
transition: all 1s linear;
background: #000;
}
.demo-enter.demo-enter-active {
background: #ccc;
}
The ng-animate attribute is deprecated in 1.2 and no longer used. Instead, animations are now class based.
If you want your ng-repeat enter animaiton to be named 'demo' you have to decorate it with some additional classes following a special naming convention:
.demo.ng-enter {
transition: all linear 500ms;
opacity: 0;
}
.demo.ng-enter-active {
opacity: 1;
}
Then just put the 'demo' class on the element containing the ng-repeat:
<div ng-repeat="entry in entries" class="demo">
Demo: http://plnkr.co/edit/kNeXtl6TpGNvtQEpErwh?p=preview
Good source on the subject: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
If you want the fade animation, set opacity to 0 at the setup class, and opacity to 1 at the active
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
I am using angular-ui-router with angularJS v1.2 and would like to implement custom page transitions.
How can I use ng-animate with ui-view (from angular-ui-router) rather than ng-view (which would be the standard way)? See Remastered Animation in AngularJS 1.2 for reference on ng-view.
EDIT:
I have tried two different versions of angular: v1.2.0-rc.2 and v1.2.0-rc.3 as suggested in the comments, but neither seems to do the trick. I guess I might be doing something wrong?
Here is the HTML:
<div ui-view class="slide"></div>
and the CSS:
.slide {
width:1024px;
height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
border: 1px solid blue;
}
.slide.ng-enter.ng-enter-active {
border: 1px solid red;
}
I added a JSfiddle of the previously mentioned example. It would be nice to expand this example to cover ng-view and ui-view, but I'm not sure how to get ng/ui-view and the partials into JSfiddle, though.
The bug is now closed and they've added an entry over at the ui-router Wiki. It also includes a demo Plunkr. I will copy the code example here, just in case the URL would become outdated.
HTML:
<div class="row">
<div class="span12 ui-view-container">
<div class="well" ui-view></div>
</div>
</div>
CSS:
/* Have to set height explicity on ui-view
to prevent collapsing during animation*/
.well[ui-view]{
height: 65px;
}
.ui-view-container {
position: relative;
}
[ui-view].ng-enter, [ui-view].ng-leave {
position: absolute;
left: 0;
right: 0;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
[ui-view].ng-enter {
opacity: 0;
-webkit-transform:scale3d(0.5, 0.5, 0.5);
-moz-transform:scale3d(0.5, 0.5, 0.5);
transform:scale3d(0.5, 0.5, 0.5);
}
[ui-view].ng-enter-active {
opacity: 1;
-webkit-transform:scale3d(1, 1, 1);
-moz-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1);
}
[ui-view].ng-leave {
opacity: 1;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
[ui-view].ng-leave-active {
opacity: 0;
-webkit-transform:translate3d(100px, 0, 0);
-moz-transform:translate3d(100px, 0, 0);
transform:translate3d(100px, 0, 0);
}
Looks like this is fixed with UI Router 0.2.8.
I'm using AngularJS v1.2.7.
For an example, just add the "slide" class to your ui-view
<div ui-view class="slide">
And use the following css for your animation.
.slide {
-webkit-transition: -webkit-transform .7s ease-in-out;
-moz-transition: -moz-transform .7s ease-in-out;
-o-transition: -o-transform .7s ease-in-out;
transition: transform .7s ease-in-out;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide.ng-enter {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide.ng-enter.ng-enter-active, .slide.ng-leave {
position: absolute;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
Additionally, some animations seemed to have some weird behavior because of $uiViewScroll. I worked around it by adding autoscroll="false" to my ui-view element.
Over the weekend, I created two plunks demonstrating view animations for both ui-view and ng-view
ui-view: http://plnkr.co/edit/jpebBk?p=preview
ng-view: http://plnkr.co/edit/LQhVYU?p=preview
angular-ui-router 0.2.8 came with fixes to major view animation bugs
I just posted a tutorial with a working demo for using ngAnimate (1.4.8) with UI Router.
It shows a couple of different view animations, a fade in transition on the main view and a slide in/out transition on a nested view.
Here's a snippet from the LESS file for the fade in transition on the main view:
main {
/* start 'enter' transition */
&.ng-enter {
/* transition on enter for .5s */
transition: .5s;
/* start with opacity 0 (invisible) */
opacity: 0;
}
/* end 'enter' transition */
&.ng-enter-active {
/* end with opacity 1 (fade in) */
opacity: 1;
}
}
Avoid the view name for named-views or id for that element.
For example, if this is your html
<div id="home-page" ui-view="home">
<!-- THIS IS WHERE YOUR TEMPLATE WILL BE LOADED -->
</div>
Instead of:
/*AVOID*/
div#home-page[ui-view="home"].ng-enter {
/*ENTER STYLES*/
}
div#home-page[ui-view="home"].ng-enter-active {
/*...ENTER-ACTIVE-STYLES*/
}
Try:
div[ui-view].ng-enter {
/*...ENTER-STYLES*/
}
div[ui-view].ng-enter-active {
/*...ENTER-ACTIVE-STYLES*/
}
Good Luck.
Like someone said in the post. there is a angular 1.2 branch of the router that has patches that make it work. I know for a fact that using Angular 1.2.6 ng-animate 1.2.6 and my special ui-router build of 0.2.0 beta branch 1.2 works... fading ui-views.. in and out.
the problem is that you need to "build" the beta branch angular router.. you can't just go download a tarball from git and it works.. you have to download it. then BUILD it. then you will have a custom ui-router. look at your ui-router header in javascript. mine says this..
/**
* State-based routing for AngularJS
* #version v0.2.0-dev-2013-10-05
* #link http://angular-ui.github.com/
* #license MIT License, http://www.opensource.org/licenses/MIT
*/
does your's say version 0.2.0-dev-2013-10-05? that date is the date i compiled mine. so your date should be relevant to yours.. if you don't see that in your header of your javascript then you are just using the same 0.2.0 version as the master, you aren't using anything special to make 1.2 animations work...
here is a pastbin of the compiled ui-router that works with 1.2 try it out. BOOM!
0.2.0 Angular-ui-router custom build
In case anyone wanted to use animate.css with Angular and UI-Router, one could simply do this below. Note this was only tested using Angular 1.2.21 and UI-Router 0.2.10.
Example of using FadeInDown as enter animation and FadeOutDown as exit animation. Simply swap the animation name for any animation from animate.css. You may also want to put this in a div container with the position set to relative.
HTML:
<div data-ui-view class="fade"></div>
CSS:
.fade.ng-enter, .fade.ng-leave {
position: absolute;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.fade.ng-enter {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.fade.ng-leave {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
Another example instead using bounceInDown and bounceOutDown:
HTML:
<div data-ui-view class="bounce"></div>
CSS:
.bounce.ng-enter, .bounce.ng-leave {
position: absolute;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.bounce.ng-enter {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
.bounce.ng-leave {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
EDIT: Made a fork of #kamweti's Plunker to visualize example with animate.css.
Using AngularMotion https://github.com/mgcrea/angular-motion then just add this to your css...
div[ng-view].ng-leave-active {
display: none !important;
}
Add your animation to the class (am-fade in my case) of your ng-view div
I have looked at the official show/hide transition example at the bottom of this page... http://docs.angularjs.org/api/ng.directive:ngShow
I have tried to modify it to get a seemless fade transition (transition: opacity 0.5s ease-in-out) from one div to the other, where both divs occupy the exact same position on the page, so that one div completely fades out before the other div begins to fade in.
In jquery, it would be as simple as:
$("#divA").fadeOut(function() { $("divB").fadeIn(); });
Does anyone have any advice on the best way to achieve this with angular, with respect to the linked example, which uses a single model "checked" to trigger the transition?
I used the example in ngShow to make the following jsfiddle based on angular1.2.0-rc.3.
The html code:
<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>
The CSS styles
.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;
}
And finally the JavaScript code, don't forget to include the libraries angular.js and angular-animate.js
angular.module('App', ['ngAnimate']);
I hope it helps you ;)
Using the ngAnimate module, you can do this in pure CSS with the -transition-delay directive:
Plunker
HTML
<body ng-app="ngAnimate">
Click me: <input type="checkbox" ng-model="checked">
<br/>
<img ng-show="checked" src="img1.jpg">
<img ng-hide="checked" src="img2.jpg">
</body>
CSS
img {
position: absolute;
}
.ng-hide-add-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.ng-hide-remove-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.ng-hide {
opacity: 0;
}
You can use ng-animate in conjuction with ng-show (http://docs.angularjs.org/api/ngAnimate), available from Angular 1.1.4. Or alternatively simply apply a show class when the model is ticked and apply your show and animation to the class.
<label><input type="checkbox" ng-model="showElement" />Show div</label>
<div ng-class="{show: showElement}"></div>