Cannot get ngAnimate to work in angular1.2 - javascript

This is my html:
<html>
<head></head>
<body>
<form role="form" ng-if="on" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
...stuff...
</form>
</body>
</html>
This is my model:
$scope.on = false;
//attaching this function to the window so i can call it from the console
window.switchOn = function() {
$scope.$apply(function() {
$scope.on = !$scope.on
});
}
This is my CSS:
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
I've also added the ngAnimate inclusion to my app controller:
angular.module('app', [..., 'ngAnimate'])...
The purpose of this is to toggle the form from the console. According to the ngAnimate docs, the form should animate into appearance (I'm using Chrome). But it isn't. I've included the angular-animate file. I can see it in the loaded sources. What am i doing wrong?

Step One: Make sure you are including the ng-animate module. Here are the steps from the docs:
Animations are not available unless you include the ngAnimate module as a dependency within your application.
First include angular-animate.js in your HTML:
<script src="angular.js">
<script src="angular-animate.js">
You can download this file from the following places:
Google CDN
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js
Bower
bower install angular-animate#X.Y.Z
code.angularjs.org
//code.angularjs.org/X.Y.Z/angular-animate.js"
where X.Y.Z is the AngularJS version you are running.
Then load the module in your application by adding it as a dependent module:
angular.module('app', ['ngAnimate']);
With that you're ready to get started!
Step Two:
Your CSS needs to have a .ng-enter class:
.reveal-animation.ng-enter {
-webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
#-webkit-keyframes enter_sequence {
from { opacity:0; }
to { opacity:1; }
}
#keyframes enter_sequence {
from { opacity:0; }
to { opacity:1; }
}
And your html simply has to have the class:
class="reveal-animation"
http://jsfiddle.net/bpR66/
If pre version 1.2
Your CSS needs to have -setup, and -setup.-start classes:
.animate-enter-setup {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-enter-setup {
max-height: 0;
opacity:0;
}
.animate-enter-setup.animate-enter-start {
opacity:1;
min-height: 20px;
}
Here is a fiddle I modified to show an example (not using a form, but should demonstrate): http://jsfiddle.net/xv5ry/1/

Related

How ui-router works with ng-animate?

I certainly hope that you guys can show me where did I go wrong.
So I try to put together ui-router with ng-animate. Routing works like charm. However, ng-animate staggers to kick in. According to all the samples and docs that I've been reading, the ui-view container should be duplicated, but it does not occur. Instead the container's innerHTML is replaced. I also use an external animation library called animate.css
So I put together a plunkr in hope that some of you could help me out.
Here is a plunkr demo
view1:
<section class="view1" >
<h1>VIEW 1</h1>
<a ui-sref="view2">view2</a>
</section>
view2:
<section class="view2" >
<h1>VIEW 2</h1>
<a ui-sref="view1">view1</a>
</section>
styles:
body {
width: 100%;
}
.view-container {
width: 100%;
}
.view-container.ng-enter .view1,
.view-container.ng-enter .view2,
.view-container.ng-leave .view1,
.view-container.ng-leave .view2 {
position: absolute;
left: 30px;
right: 30px;
transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
}
.view-container.ng-enter .view1,
.view-container.ng-enter .view2 {
-webkit-animation: slideInRight 0.5s both ease;
-moz-animation: slideInRight 0.5s both ease;
animation: slideInRight 0.5s both ease;
}
.view-container.ng-leave .view1 .view-container.ng-leave .view2 {
-webkit-animation: slideOutLeft 0.5s both ease;
-moz-animation: slideOutLeft 0.5s both ease;
animation: slideOutLeft 0.5s both ease;
}
.view1,
.view2 {
width: 100%;
height: 300px;
border: 2px solid red;
}
.view2 {
border: 2px solid green;
}
scripts:
'use strict';
var mainModule = angular.module('poc', ['ui.router', 'ngAnimate']);
mainModule.config(["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('view1', {
url: '/view1',
templateUrl: 'view1.html',
}).state('view2', {
url: '/view2',
templateUrl: 'view2.html',
});
$urlRouterProvider.otherwise('/view1');
}
]);
mainModule.run(["$rootScope", "$state",
function($rootScope, $state) {
$rootScope.$on('$stateChangeSuccess', function(event, endState, endParams, startState, startParams) {
console.log(endState);
});
$rootScope.$on('$stateChangeError', function(event, endState, endParams, startState, startParams) {
console.warn(startState);
console.warn(endState);
});
}
]);
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body data-ng-app="poc">
<div ui-view="" class="view-container"></div>
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="angular.js#1.4.9"></script>
<script src="https://code.angularjs.org/1.4.9/angular-animate.js" data-semver="1.4.9" data-require="angular-animate#*"></script>
<script data-require="ui-router#0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</body>
</html>
Any help is appreciated.
You need to add some animation definitions for slideInRight and slideOutLeft
Can use animate.css library for those.
For starters I suggest moving the animation selectors to your <ui-view> element
What actually happens is when a transition time is detected....the element will be cloned allowing for 2 in dom at once ... one entering and one leaving. You can see this in the live html in browser dev tools
DEMO

Animate div block when Angular View loads

So in this fiddle I have a block sliding in from the left after two seconds.
(function (angular) {
'use strict';
angular.module('testApp', [])
.controller('TestCtrl', function ($scope, $timeout) {
$scope.title = "Hello";
$scope.show = false;
$timeout(function () {
$scope.show = true;
}, 2000);
});
})(angular);
I would like to have the block sliding in when the view is rendered and can be seen by the user.
There is already a style that can be applied to get the block sliding in.
.left-inner-nav {
position:absolute;
top:0;
/*left:75px;*/
left: -150px;
width: 150px;
bottom: 0;
background:#2792D9;
-webkit-transition: left 2s ease;
-moz-transition: left 2s ease;
-ms-transition: left 2s ease;
-o-transition: left 2s ease;
transition: left 2s ease;
}
.left-inner-nav-animate {
left: 0;
}
I'm just stuck as to how to do this on view load.
This is what ngAnimate is for.
ngAnimate adds 4 classes, for different ngView states.
<style>
.slide.ng-enter { } /* starting animations for enter */
.slide.ng-enter.ng-enter-active { } /* terminal animations for enter */
.slide.ng-leave { } /* starting animations for leave */
.slide.ng-leave.ng-leave-active { } /* terminal animations for leave */
</style>
Download and include a reference to angular-animate.js. Then, add ngAnimate as a dependency
angular.module('testApp', ['ngAnimate']);
Update
Markup
<div ng-view class="left-inner-nav"></div>
CSS
.left-inner-nav.ng-enter {} /* starting animations for enter */
.left-inner-nav.ng-enter.ng-enter-active {} <style>
.slide.ng-enter { } /* starting animations for enter /
.slide.ng-enter.ng-enter-active { } / terminal animations for enter */

ng-view fades in on purpose, but then fades out

I have this ngView-directive: <div ng-view="" class="fade"></div> where i have the following styles applied:
.fade.ng-enter {
-webkit-transition:0.3s linear all;
transition:0.3s linear all;
opacity:0.5;
}
.fade.ng-enter.ng-enter-active {
opacity: 1;
}
But the problem is that the view fades in, and then fades out automatically, by setting it's opacity to 0. Am i missing something important? I have made this screencast illustrating the issue: https://www.youtube.com/watch?v=_5IUO-ntlOA
Bootstrap apparently has a class called .fade, which has an opacity of 0. That was why.
Here is the fix.
.fade.ng-enter {
-webkit-transition:0.3s linear all;
transition:0.3s linear all;
opacity:0.5;
}
.fade.ng-enter-active {
opacity: 1;
}
ng-enter disappears and only ng-enter-active remains.

ng-animate when ng-view is updated through route

I try to animate the change of a ng-view div in AngularJS.
So my div inside my index.html file looks like:
<div ng-view></div>
I have another html-file (view1.html) with just divs inside.
My app.js with the routing looks like:
app.config(function($routeProvider) {
$routeProvider
.when('/sites/:templateID',
{
controller: 'simpleController',
templateUrl:'templates/question.html'
})
});
I am changing the path with a click on a button, and call this:
$location.path("/sites/" + nextID);
The URL changes of the site, and only the ng-view-div gets updated. But when i am applying a ng-animation to it:
<div class="content" data-ng-view ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"></div>
It doesn't work. I included AngularJS 1.2.5, the animate-js file inside my index.html and also my CSS:
.animate-enter, .animate-leave {
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
transition:all 2s ease;
}
.animate-enter {
left: -100%;
}
.animate-enter.animate-enter-active {
left: 0;
}
.animate-leave {
left: 0;
}
.animate-leave.animate-leave-active {
left: 100%;
}
Is there a way to animate the ng-view change through route-(URL)-changing?
ng-view can work with animation. In fact there is official example of it. Check out this link.
Also remember that you also need to declare ngAnimate dependency for it to work:
var app = angular.module('App', [
'ngRoute',
'ngAnimate'
]);
HTML
<div class="content">
<div class="question" ng-view></div>
</div>
Class .question defines CSS animation:
.question.ng-enter,
.question.ng-leave {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
Your modified demo Plunker.
Mini-project
I also created a little project demonstrating different ngView animations. Check it out this page.
There are a few changes to the CSS rules with Angular Animation 1.2+. ng-animate directive is no longer used so AngularJS now changes the class of the element based on events, such as hide, show, etc.
You can define these like so in your CSS:
.toggle {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
.toggle.ng-enter {
opacity: 0;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}
.toggle.ng-enter-active {
opacity: 1;
}
.toggle.ng-leave {
opacity: 1;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}
.toggle.ng-leave-active {
opacity: 0;
}
.toggle.ng-hide-add {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity: 1;
}
.toggle.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
.toggle.ng-hide-remove {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity: 0;
}
.toggle.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
That way when you have your HTML element you really only have to define the class="toggle" for example. When your app runs Angular will append the classes appropriately.
Here is a good resource for different animation techniques by Augus
And here is a break down of the changes in AngularJS Animations
In 1.2+ you no longer need the directive, the css notation has changed aswell.
The 1.2.5 way of doing it is as follows:
Give your View a class:
<div data-ng-view class="mainview-animation"></div>
Add the following dependency:
/**
* Main Application & Dependencies
* #type {*}
*/
var mainApp = angular.module('app', [
// Angular modules
'ngRoute',
'ngAnimate'
]);
Then add the following CSS:
/*
The animate class is apart of the element and the ng-enter class
is attached to the element once the enter animation event is triggered
*/
.mainview-animation.ng-enter {
-webkit-transition: .3s linear all; /* Safari/Chrome */
-moz-transition: .3s linear all; /* Firefox */
-o-transition: .3s linear all; /* Opera */
transition: .3s linear all; /* IE10+ and Future Browsers */
}
/**
* Pre animation -> enter
*/
.mainview-animation.ng-enter{
/* The animation preparation code */
opacity: 0;
}
/**
* Post animation -> enter
*/
.mainview-animation.ng-enter.ng-enter-active {
/* The animation code itself */
opacity: 1;
}
Just to add to the accepted answer it is necessary to either define position: absolute or display: block to .ng-enter and .ng-leave. I struggled with this for a while when trying to fade in ng-view on route change and didn't want to use absolute positioning. Example without browser prefixes for transition:
//add animate class to ng-view
//css
.animate.ng-leave, .animate.ng-enter {
transition: 1s cubic-bezier(0.5, 0.1, 0.25, 1) all;
}
.animate.ng-enter, .animate.ng-leave.ng-leave-active {
opacity: 0;
display: block;
}
.animate.ng-leave, .animate.ng-enter.ng-enter-active {
opacity: 1;
display: block;
}
For my specific situation I removed the transition from ng-leave so there wouldn't be overlap of elements which would cause one to be pushed down due to block display.

css3 image fadein

I'm trying to have images fade in with css3 once they're loaded. The problem is the way my methods are currently chained it fades it in and out for a split second twice. instead of just being blank and fading in.
my solution was to try and split out the animation code into a seperate class that i apply AFTER i initially set the opacity to zero (i do this in JS so people without js enabled can still see the images).
It's still not working though
I assume its because in this code its setting the opacity to zero and immediately adding an animation transition class which somehow catches the opacity .css() method while its changing still (dont know how this is possible,... shouldnt it complete opacity before moving on to add class?)
// nice thumbnail loading
$('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){
$(this).css('opacity','1');
});
.resources .thumb-animated {
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-ms-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
Well...
Why do you set opacity to 1 in jQuery?
If you want to use CSS3 and not simply fadeIn(200) why don't you add "opacity: 1" to css class thumb-animated?
EDIT:
Note that load will not be triggered if the image is already in cache.
Also, !important has to be added to rewrite the rule modified via javascript.
There you go: http://jsfiddle.net/enTCe/5/
This seems to work perfectly outside JSfiddle, on JSfiddle looks like it waits for all the images to be loaded.
What about using just css animations? No JS code is needed.
#-webkit-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
.thumb {
width: 200px;
height: 200px;
opacity: 1;
-webkit-animation: opacityChange 5s;
-moz-animation: opacityChange 5s;
-ms-animation: opacityChange 5s;
}
You can wait adding the class to the image is loaded
$('.thumb').css('opacity','0').on('load', function(){
$(this).addClass('thumb-animated').css('opacity','1');
});
Try something like this:
$('#thumb').hide();
myImg = $('<img>').attr('src', 'thumb.png').load(function(){
$('#thumb').html(myImg).fadeIn(200);
});

Categories

Resources