Develop Reference

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.

animate div using angularjs animate

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.

Only the first element in ngRepeat is animated

If I load async data in my app. NgRepeat only animates the first element in an array.
jsFiddle
html:
<div ng-repeat="x in data"></div>
css:
.box.ng-enter {
-webkit-transition: all 2s ease;
transition: all 2s ease;
opacity: 0;
top: 20px;
}
.box.ng-enter-stagger {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.box.ng-enter.ng-enter-active {
opacity: 1;
top: 0;
}
In this example I use $timeout to simulate an async datasource.
Why is that.
Thanks!

My guess is this was a bug that has since been fixed. There have been a large number of changes to the animate module since the 1.2.* release.
Here is a JsFiddle that has the latest source from git for the animate module embedded and the issue has gone away. If you need this functionality then it is probably best for you to load in your own version of the animate module using the latest source.
Here you can compare the 1.2.* branch to the master branch look for "src/ngAnimate/animate.js" to see all the changes to the module.
Ignore - needed to get the fiddle link to work i get the motivation
behind requiring code along with a fiddle but in this case it actually makes
little sense the only modification made to the original was the addition of
1600 lines of code taken from the latest version of the module. I'm not
putting that in here.

CSS transition on click

I'm working on creating a mini-sort plugin with jquery.
I want to have the option to trigger css animations on click event, but I found out animation don't get triggered on elements that have been hidden using display: none;.
I tried with creating a class and applying that class to the element but this won't work.
$('.legend li').on('click',function(){
var thisClass = $(this).attr('class');
$('div').not('.'+thisClass).removeClass('active');
$('div.'+thisClass).addClass('active');
});
I found a plugin which has the same functionality that I wan't but I would like to try to build something smaller and I always like to attempt myself as a learning experience before resorting to plugins. I'm a bit confused as to how they run the animations. It looks like inline css but when I tried to add inline transitions there was no effect. Even though I could see the transitions in the style tag.
Edit
Here is a fiddle.
http://jsfiddle.net/NktDU/1/

You could use jQuery's hide and show instead
Updated demo
$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');
and remove display:none from the CSS
Or you could do it just using CSS transitions and toggling the width, like so
#grid div {
display: block;
height: 20px;
width: 0px;
margin:0px;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: black;
}
#grid .active {
width:20px;
margin: 2px;
}
Demo for that

I think the library you would have to write for something like this is immense. In this case, I highly recommend you work on implementing Isotope by David DeSandro.
Is this the plugin you were talking about? I can assure you that while you want to come up with your own solution, you can make isotope your own. I've implemented it a couple of times. You will learn a lot, while at the same time, learning how jQuery/JS/CSS (and media queries) work together.
I've implemented the click to sort, and I also created my own sort by keyword search. I can put together a couple of fiddles if you want...
Edit:
I just saw the link to the plugin you found... it actually uses isotope's framework and recommends you use isotope in certain situations.
Good luck!