I'm using Angular 1.3 and animate.css.
I'm trying to apply a simple fadeIn/out animation on a directive i have using this code:
.vl-fade-in-out{
&.ng-enter{
animation: fadeIn 1s;
}
&.ng-leave{
animation: fadeOut 1s;
}
}
But no animation is applied, however, the same animation does apply if i use it directly on a html element (like div).
//this is not animating
<my-directive class="vl-fade-in-out" ng-if="show"></my-directive>
//this is animating
<div class="vl-fade-in-out" ng-if="show"></div>
Also if i apply fadeIn/out effect using transition it works even when applied on the directive:
.vl-fade-in-out{
&.ng-enter{
transition:1s linear all;
opacity: 0;
&.ng-enter-active{
opacity: 1;
}
}
&.ng-leave{
transition:1s linear all;
opacity: 1;
&.ng-leave-active{
opacity: 0;
}
}
}
Am I doing something wrong?
Pen: http://codepen.io/anon/pen/aOLzGE
#Claies was right in his second comment.
<my-directive> is not a recognized element in Chrome so it does not assign it any default attributes that you would expect. Assigning display: block to my-directive or .vl-fade-in-out will allow it to be animated.
Or you could use replace: true in the myDirective return in order to replace the custom element with the content of the template if your content contains a normal element.
Use restrict:'C' with <div class="test">. it will work
I am trying to create a carousel, in which I would be loading data lazily.
What I want is, when I add a new set of data, it should slide in a normal carousel.
I tried playing with angular-animate and tried adding .enter, .leave css transition
but it does not works
FIDDLE HERE
css
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
HTML
<div ng-repeat="slide in slides"
ng-animate=" 'animate' " >
<img ng-src="{{slide.image}}" style="float:left; padding: 10px;"></img>
</div>
Angular 1.2+ uses a different syntax - it's like this:
<div class="animate" ng-repeat="slide in slides">
You also need to change your css to something like this:
.animate.ng-enter,
.animate.ng-leave
{
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
opacity: 1;
}
.animate.ng-enter.ng-enter-active,
.animate.ng-leave {
opacity: 0;
}
fiddle is here
I haven't got the animation quite working smoothly yet (it's a bit jerky) but you can fiddle with that now that it's actually animating.
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;
}
My code looks like this:
<div class="block-border"
data-ng-show="qty > 0">
xxx
</div>
I know there have been a lot of changes with Animation in AngularJS. Can someone tell me the easiest way for me to make it take 500ms to show and 50ms to hide the xxx when the value of qty changes. Note that I am using the very latest AngularJS.
Reference angular-animate.js
Add ngAnimate as a dependent module:
var app = angular.module('app', ['ngAnimate']);
Pick a name for your transition, for example 'fade', and then define the appropriate CSS classes based on the naming convention described in the documentation:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove,
.fade.ng-hide-add {
display: block !important; /* or inline-block, as appropriate */
}
.fade.ng-hide-remove {
transition: all linear 1000ms;
}
.fade.ng-hide-add {
transition: all linear 500ms;
}
Add the class to your element:
<div class="block-border fade" ng-show="qty > 0">
Demo: http://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2?p=preview
I couldn't get the accepted answer to work, but the following did work (taken largely from this ng-nuggets post):
.fade {
transition: all linear 500ms;
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
and then my HTML element which I wanted to fade in and out looked something like this:
<span data-ng-show="copyLinkClicked" class="fade">some text here</span>
As #MichaelNguyen mentioned, Bootstrap does appear to have a style already called fade, and we are using Bootstrap in our application, yet the above styles worked nonetheless. If you already have a style named fade, then change the name to something unique before using the above code.
If you want to fade in using ng-if as a boolean angular has some nice documentation here https://docs.angularjs.org/api/ngAnimate . I used ng-if for my fading purposes here's an example below:
form.html
<form name="exampleForm" ng-submit="submit()">
<input type="email" placeholder="Email Address" ng-model="email" required>
<input type="text" placeholder="Name" ng-model="name" required>
<input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
<input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>
form.css
/* css for button that will show when form is invalid */
.invalid-btn {
border: 1px solid #222;
width: 100px;
height: 50px;
color: #222;
background: #fff;
}
.invalid-btn.ng-enter {
opacity: 1;
}
/* The finishing CSS styles for the enter animation */
.invalid-btn.ng-enter.ng-enter-active {
opacity: 0;
}
.valid-btn {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
}
/* The starting CSS styles for the enter animation */
.valid-btn.ng-enter {
transition:0.5s linear all;
opacity: 0;
}
.valid-btn.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.3s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
/* The finishing CSS styles for the enter animation */
.valid-btn.ng-enter.ng-enter-active {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
opacity:1;
}
The way this works is if you want to fade in a button with a different color or text and different text color you can fade in a button when the form is filled out and valid and the invalid button will fade out leaving only one button depending on the state of the form. Kind of a hack but it works and looks smooth. I had to set a delay using .ng-enter-stagger because loading the animations at the same time was causing the buttons to blink and jump and not animate smoothly. So in this case we let invalid button hide first then load valid button when form is valid and all input fields have been filled out correctly.
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