Animation
in
AngularJS
THE FOLLOWING
PREVIEW
HAS BEEN APPROVED FOR
ALL AUDIENCES
SO DON'T PANIC EVEN IF YOU'RE NEW TO ANGULAR
Gias Kay Lee
ANIMATIONS
How people still do
today
$('div').animate({
opacity: 0.25
}, 1000);
THIS IS SO
THIS IS SO
YESTERDAY
YESTERDAY
http://spongebob.wikia.com/wiki/Squog
CSS3 Please
.fade {
transition: 1s;
opacity: 0.25;
}
#1
Put
Presentational Details
Back to
Where They Belong
.fade {
transition: 1s;
opacity: 0.25;
}
$('button').click(function() {
$('div').addClass('fade');
});
ie.
Separation of Concerns
#2
Performance is Better
#3
Even Better
Performance!
.fade {
transition: 1s;
transform: translateZ(0);
opacity: 0.25;
}
Wait...
What about...
cross-browser support?
Sexy and robust.
3/4 of users
can see CSS3 animation as of May 2013
More good news!
IE10 is seriously pwning IE9!
wOOt!
Beginning of Auto-upgrade ⬇
So that leaves roughly 10% of users still at large but,
please lemme tell you this...
THEY.
DON'T.
DESERVE.
THE.
F ♥CK.
THEY.
DON'T.
DESERVE.
THE.
F ♥CK.
Hope Linus won't mind me borrowing this wonderful shot to convey my idea. http://www.nikopik.com/2013/02/linus-torvalds-a-toujours-un-sacre-franc-parler.html
Do you know that...
10%
of mobile web users still come from feature phones
and other primitive devices?
So why would you care...
whether IE8 users could see your fancy animations
or not?
Animation is
Rhetorical
Animation is
Rhetorical
It enlivens your expression,
but stripping it away and things should still be obvious.
http://www.freegreatpicture.com/background-color-theme/hd-color-background-wallpaper-18429
To Summarize
Animation in
jQuery
...relies on
CPU & Memory
...is written in an untyped, interpreted language
is
Slow.
Unsmooth.
Uncool.
Animation in
CSS3
...can tap into the power of
GPU
...is running on engines written in native code
is
Fast.
Smooth.
Awesome.
Stop Spoiling
the
Laggards
and
Stop Thinking
in
jQuery
LET THE LAGGARDS CLIMB
LET THE LAGGARDS CLIMB
SO THE REST 90%
SO THE REST 90%
CAN TAKE THE FUN RIDE
CAN TAKE THE FUN RIDE
http://www.listofimages.com/robin-de-blanche-escalator-light-other.html
CSS FOR
ANIMATION
TODAY
http://obamamedia.wordpress.com/2008/10/14/blue-obama-o-logo-wallpaper
Wait... What the...?
I thought we're gonna talking about
AngularJS
today?
Actually
Animation
in
AngularJS
is
CSS3
AngularJS
puts a heavy emphasis on
Separation of Concerns
It goes great lengths
extending the vocabulary of HTML
to restore balance to the galaxy...
three pillars of the frontend world...
HTML
STRUCTURE
JS
BEHAVIOR
CSS
PRESENTATION
The Eval JavaScript Empire
HTML
INTERFACE
JS
LOGIC
CSS
PRESENTATION
The New Angular Republic
.fade {
transition: 1s;
opacity: 0.25;
}
$('button').click(function() {
$('div').addClass('fade');
});
Let's see how to express
this same thing
the "Angular Way"...
http://imagesci.com/rainbow-abstract-backgrounds-2210-hd-wallpapers.html
Demo #1
ngClass
+
CSS3 Transition
THE ANGULAR WAY
THE ANGULAR WAY
http://www.wallpaperup.com/41783/Spongebob_rainbow_cartoon.html
But... Wait!
What if we'd like to do
THIS?
Demo #2
ngClass
for
Something More Complex
As we've just seen
there appears to be some problems...
LACK OF
FINE-GRAINED
CONTROL
VENDOR PREFIX
SUCKS
THIS DOESN'T SEEM
Angular
ENOUGH!
http://imagesci.com/rainbow-abstract-backgrounds-2210-hd-wallpapers.html
Most Importantly...
INTERFACE
LOGIC
PRESENTATION
⇒
⇐
⇒⇒⇒
ngClick
ngController
ngClass
CSS3
Hackish, Hard to Test
Nothing to do with REAL LOGIC
REAL LOGIC is down to earth
Nothing RHETORICAL
⇒⇒⇒
Why can't we do it like this?
Angular Bootstrap
tackles this issue with a homemade $transition service
But...
You no longer need to
reinvent your own solution.
ngAnimate.
CSS3
⇒⇒
Meet
To use ngAnimate, you need the
Unstable Branch
of AngularJS
(As of June 2013)
This does NOT mean things will randomly break.
No.
This means things are in
constant flux
So you gotta follow the changelog yourself
ENOUGH
TALKING
ALREADY
Let's see
ngAnimate in action!
Demo #3
ngAnimate
+
CSS3 Transition
Demo #4
ngAnimate
+
CSS3 Keyframe Animation
Demo #5
ngAnimate
+
Animate.css
THE ANGULAR WAY
THE ANGULAR WAY
http://www.wallpaperup.com/41783/Spongebob_rainbow_cartoon.html
Now...
I ACTUALLY LIED.
Animation in AngularJS can also be done in JavaScript
But you better have a good reason doing that
Demo #6
ngAnimate
+
jQuery
It's immediately apparent why you'll wanna use
CSS3-defined animations
whenever possible
CSS-Defined
Animations
...let's you write-less-do-more™
...is the convention-over-configuration approach
...with all the aforementioned advantages
JavaScript-Defined
Animations
...is more verbose
...most likely brings along a lot of deadweight
...with all the aforementioned troubles
If you really need JavaScript animations,
consider using
GSAP
instead of jQuery
Further Reading
http://www.yearofmoo.com/Further Reading
http://gsklee.im/post/50254705713