animate div using angularjs animate - javascript

I am using angularJs 1.2+ and angular ui router.
I have a route that contains div. When entering to that route, a div showed up. I would like to add an animation to that div for enter and leave but I don't know how to do it.
I don't know if I should create a directive that uses $animate or use a built in directive of angular. Any suggestion?

There is a FAQ:
How to: Animate ui-view with ng-animate
And also the related example plunker.
As explained in Developer Guide / Animations,
How they work:
Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to a HTML element within your website, you can apply animations to it...
So, this way we can create some CSS definitions related to our ui-view element (class or attribute as used in the plunker) and ngAnimation injected classes: .ng-enter, .ng-leave..
A snippet from the FAQ related plunker
[ui-view].ng-enter, [ui-view].ng-leave {
position: absolute;
left: 0;
right: 0;
...
transition:all .5s ease-in-out;
...
}
[ui-view].ng-enter-active {
opacity: 1;
...
transform:scale3d(1, 1, 1);
...
}
[ui-view].ng-leave {
opacity: 1;
...
transform:translate3d(0, 0, 0);
...
}

You need to create the animation in CSS and have ngAnimate apply and remove the appropriate classes.
Or here is a nice Angular Lib that I use with predefined animations: https://github.com/Hendrixer/ng-Fx
Read the directions carefully, you need the TweenMax.js library.

Related

What is the best way to add a keyframe animation to a template using jQuery?

I am using Meteor/Blaze to build a web app and have a series of templates. In one of my templates I would like to animate the top nav bar and not have that animation take place in any other template that includes the bad.
I have a keyframe animation that I want to use in my Dashboard page. What is the best way for me to use the animation, and then either remove it in the onDestroy or just not have it be used in any other template?
I tried doing it with jQuery but I believe it is not possible with the syntax I used. Here is my code.
Template.Dashboard_page.onCreated(function homePageOnCreated() {
$('.main-nav').css('animation' , 'navSlide 0.3s');
};
Template.Dashboard_page.onCreated(function homePageOnDestroyed() {
$('.main-nav').css('animation' , '');
};
.main-nav {
//css for the top bar
}
#keyframes navSlide{
from {
transform: translateY(-25%);
}
to {
transform: translateY(0);
}
}
So what I tried doing was when the Dashboard template is created, to add the animation using .css() and then when it is destroyed to remove it using the same method.
This works for other CSS attributes like background-color, height etc. But not for 'animation'.
Could someone help assist me in finding a better solution?

Recreate jQuery's slideUp and slideDown, but for slideRight and slideLeft instead?

I'm using slideUp and slideDown to animate sections hiding and showing using AngularJS's ngShow. It works fine, but I'd much rather have slideLeft and slideRight. How would I go about recreating slideUp and slideDown for those?
slideUp automatically hides the the element and slideDown automatically shows it - how would I be able to configure this such that they hide and show when I want then to? e.g.:
$(element).slideLeftAndHide();
$(element).slideLeftAndShow();
As opposed to
$(element).slideUp(); // $element.slideUpAndHide();
You can use the following to achieve this:
$('#element').show("slide", { direction: "left" }, "fast");
Since you tagged Angular.js, I assume you're also using Angular. You should prefer using something like ng-class instead of literally showing and hiding elements with jQuery. This is a good, modular way to do what you want using existing Angular.js capabilities and fast CSS animations.
I also assume that you're doing the show/hide part in response to some sort of conditional value changing, is that right?
If so, to start off:
1. When the conditional value changes, let the DOM know by adding a class name when a condition turns true.
<div ng-class="{showing: myDataFinallyLoaded}">...</div>
In this case, if myDataFinallyLoaded is true, the div has a showing class attached.
2. When the div has a showing class name attached, animate it into view.
div {
transform: translate(-100%) scale(0);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
div.showing {
/* Any CSS rules can go in here! */
transform: translate(0px) scale(1);
opacity: 1;
}
3. When your condition becomes true, update the scope.
someRandomAPI.loadEverything().then(function() {
$scope.myDataFinallyLoaded = true;
});

AngularJS animation when model changes

I have been searching on Google and Stackoverflow but haven't found what I am looking for.
Here's what I have. I promise I am making a sincere effort at figuring this out.
The problem is as follows: I have animations working with the list. When I add items to the list using the timeout, they correctly animate in. However, the "title" variable is a string. I want to apply an animation when this value changes. I am still clueless right now honestly on how to get that to work. I understand that I can add css classes for animations for ng-hide, but I still don't quite understand how to fit that here. Any help is appreciated in advance. Please enlighten me. You don't have to give me code. Even a high level description of how to accomplish this will suffice.
// app.js
(function() {
var app = angular.module("MyApp", ["ngAnimate"]);
// route configuration
}());
// homecontroller.js
(function() {
var app = angular.module("MyApp");
app.controller("HomeController", ["$scope","$timeout", homeController];
function homeController($scope, $timeout) {
$scope.items = ["Frodo", "Bilbo", "Merry", "Pippin", "Sam"];
$scope.title = "The Hobbits";
$timeout(function() {
$scope.title = "The Hobbits and the Wizard";
$scope.items.unshift("Aragorn","Faramir","Boromir");
}, 5000);
}
}());
Some HTML
<!-- view for HomeController -->
<h1>{{ title }}</h1>
<div ng-controller="HeaderWebpart.HeaderController">
<div class="testClass" style="display:block;" ng-repeat="item in items">{{ item }}</div>
</div>
And CSS
div.testClass.ng-enter {
-webkit-animation: enter 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
animation: enter 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
display: block;
position: relative;
}
#-webkit-keyframes enter {
from {
opacity: 0;
height: 0px;
left: -70px;
}
75% {
left: 15px;
}
to {
opacity: 1;
height: 20px;
left: 0px;
}
}
div.testClass.ng-enter-active {
opacity: 1;
}
You currently have nothing that applies any animation logic to the <h1> element, simply assigning a value to title within a controller is not enough.
If you have a look at the documentation for angular animations
https://docs.angularjs.org/api/ngAnimate - you'll see that only a specific set of directives have animation hooks. Each of these directives usually have a pairing of enter/leave or add/remove animations. This means that angular adds and removes specific CSS classes to these elements, which you can use to perform animations with, similar to what you have already done with the ng-repeat directive and testClass animations above:
.yourAnimationCSSClass.ng-enter { }
=> what your element should look like before the animation starts
what the change should be and the duration
.yourAnimationCSSClass.ng-enter.ng-enter-active { }
=> ending(stable) state for your animation, ie. what the
element should look like when you're done
... ng-leave and ng-leave-active work similarly.
So, to solve this for your <h1> element, one way to apply an animation is to optionally set a CSS class using ngClass. This ends up being fairly close to the Class and ngClass animation hooks example in the Angular developer guide for animations, so have a look at that example.

Animations in AngularJS 1.2 - How To

I tried to use animations within my app but unfortunately to no avail. I checked lots of examples, blog, downloaded animate.css etc etc.
I injected animation module, tried basic examples, tried following tutorials for instance, but it seems I miss something every time.
Can someone please provide exact instructions for AngularJS v1.2 animations to work, with injections, inclusions and everything you need to do to get them working? Maybe a step-by-step instructions on how you usually do your animations.
A basic fadein/fadeout example on ng-show/hide would suffice.
Thank you very much
Reference angular-animate.js
Add ngAnimate as a dependent module:
myApp = angular.module('myApp', ['ngAnimate']);
Add a div to your view with the ng-show directive and for example the two classes 'fadein' and 'fadeout':
<div class="fadein fadeout" ng-show="show">I am the div.</div>
Add the classes to your css. In 1.2 ngAnimate is class-based and you need to add certain suffixes to your classes based on a certain naming convention. A good source of information regarding this can be found here.
Example:
/* Fade in ngShow */
.fadein.ng-hide-remove {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 0;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
/* Fade out ngShow */
.fadeout.ng-hide-add {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 1;
}
.fadeout.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
Add logic to change the expression that is provided to the ng-show directive and the div should fade in and out.
A working example: http://plnkr.co/edit/lq4LmUq5mrbJBGMMEyh9?p=preview

fallback for jquery isotope if javascript is disabled?

Is there a fallback for jQuery isotope if JavaScript is disabled?
Suppose if I m using there fitColumns property, is there a fallback to that layout style if JavaScript is disabled, like what u have in d
new myspace.
the initial posts, which appears on your myspace home page, will be styled properly but no additional post will load when you further scroll.
What kind of CSS structure or fallback methodology can be used for such situations?
If JavaScript is disabled and if you want to keep the elements positioned nicely like as if the jQuery Isotope is doing its job then you can only rely on CSS. That would mean you would have to manually position those elements in the order that you want.
If you're OK with that then follow these steps below to start:
Put a class name on the main wrapper of your Isotope elements such as off. For example: <div id="isotope-container" class="isotope off">
Start positioning your elements manually and include .off as one of the selectors. For example: .isotope.off .isotope-element-1 { position:absolute; top: 10px; left: 10px; } .isotope.off .isotope-element-2 { position:absolute; top: 10px; left: 100px; }
Then on your general jquery file where you have all other stuff written on, check if .off class exists and if it does, remove it. For example: if($('#isotope-container.isotope').hasClass('off')){
$('#isotope-container.isotope').removeClass('off');
}

Categories

Resources