- Real World Declartive Animation
- An Even Better Solution for declarative animation!
- Question 1: When the animation start
- Question 2: How to make the animation chainable?
- Question 3: How to animation two element step by step?
- Question 4: Is there any other buildin command?
- Question 5: How to extend Custom Command?
- Question 6: Need An compeletely Example?
Today, beacuse of new trends like material design and motion design, the animation is become more and more important in web-development.
On the other hand, thanks for the standardized web-component and frameworks like angularjs, knockoutjs, reactjs and vuejs etc. building the view of application in declartive way is coming into popular .
So, what about declarative animation?
This article serves to demonstrate an even better solution for declarative animation. before diving into detail, let’s first check ‘Real World Declartive Animation’ .
Real World Declartive Animation
This section will introduce the exsited approaches to implement declarative animation
angular is the most popular framework that have nearly 27000 stars on github now.
in angularjs, animation support is based on the module
ngAnimate . The directives that support animation automatically are: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass.
Expression is evaluated to
true, the class
ng-enter is added first to prepares initial state, then
ng-enter-active is added at nextReflow(similar with
Anijs: Declarative handling library for CSS animations.
anijs’s main objective is to provide an eloquent, easy to translate, and quick to develop environment based on css animations.
the exmpale above means:
DOMContentLoaded triggered on document, addClass
animated, then hold them after animationend(or transitionend).
It is dead simple and intuitive. the only requirement is to include a 8kb jsfile(minified, no gzip).
vuejs’s animation-support is very lightweight. just like angular, it hooks the element’s lifecycle at
leave (based on directive, e.g.
v-if). you can use three directive to customize your animation
v-animationanimation based on class and animation
v-transition: animation based on class and transition
v-effect: custom animation extension.
use custom effect
To be honest, I don’t know why vuejs make distinguish between these three cases.
React’s animation support is based on the low-level API:
ReactTransitionGroup. you can check the introduction of
ReactCSSTransitionGroup(High-level API) on its animation page
The element that wrapped by
ReactCSSTransitionGroup can animate when it is injected to or leave from the component. it will get the
example-enter CSS class and the
example-enter-active CSS class added in the next tick (similar with angular). This is a convention based on the transitionName prop.
compare with the
declarative animation that introduced above is obviously less flexible. for example:
- only works in given environment .(e.g. when element
- can not chainable
- can not combine with other elements’s animation
An Even Better Solution for declarative animation!
The solution introduced later that has been implemented in regularjs yet. and it can be full-supported by any framework that is data-driven(e.g. angularjs, vuejs, ractivejs..).
the solution is based on single directive:
The following sections will raise several questions and solve them later by
please be a patience man until compelete the rest of the page, you will find the power of
the examples will depend on awesome animate.css for some css-related animation.
Question 1: When the animation start
There are two types of Command: 1.
trigger is used to trigger a animation sequence. and
step is used to define a single animation.
Command on (trigger): when specified event is triggered , starting the animation.
this example means:
- when the element is clicked, trigged the animations.
animated swing(maybe trigger animation) to element, when the
transitionend) triggered, remove the class.
- animation done
however, how to hook the
leave time on element?
regularjs emit the mock
leave event for hooking the element’s lifycle, you can also use
on to handle it;
it is valid that defining multiply
trigger on single
trigger will create new animtion sequence.
Is there any other trigger?
now , we can take advantage of the data-driven framework to implement a more flexible command than
Command when (trigger): when the specifed Expression is evaluated to true, starting the animation.
test === true is computed to true, the animation will start.
Question 2: How to make the animation chainable?
r-animation is born to support chainable animation,you can simply sepecify multiply
steps after one
now, you will see the steps animate one by one.
Question 3: How to animation two element step by step?
Thanks for the data-driven system. you can use the
call command for evaluating a Expression. after evaluating, the digest phase(regularjs is also based on dirty-check) will be automately triggered, it can trigger other animation (work with
Command call: evaluted a Expression, then enter the component’s digest phase. finaly step to next animation.
steps as follow:
testis computed to true, start box1’s animation
- swing then call
otherSwing = true;
otherSwingis evaluted to
- box2 shakes, meanwhile box1 shakes;
call and data-driven system, we can staying competitive with
Question 4: Is there any other buildin command?
wait: delay for next animation
the example means: after clicking, swing then waiting 2000ms, finally shake.
style: set style and waiting the
transitionend(if the style trigger the
transition to make color fading effect work.
example means: after clicking, swing then set
you can also extend custom command by your self.
Question 5: How to extend Custom Command?
for example, we need fading animation.
describe in template
the only thing you need to do is that: when your animation is compelete, call the function
you can also check the builtin’s sourcecode on github. it is realy dead simple!
Question 6: Need An compeletely Example?
let’s create a infinite animation for joke.
just as the logic described by the template. the sequence will never stopped.
if the post is helpful to you, gives regularjs a star