Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Transitions and Animations Chapter 13

The syntax of the Velocity function is as illustrated:


Velocity( elementToAnimate, propertiesToAnimate, [options] )

Other syntaxes are possible, but we will stick to this one.


In our call to this function, we passed our paragraph element as the first argument; we then


said that the opacity should change from 0 to 1 and, at the same time, the element should
move from a starting position of 200 pixels on the x axis toward its origin. As options, we


specified that the animation should last for two seconds and that we want to ease the


animation near the end.


I think everything is pretty clear maybe except how we are passing the opacity and


translateX parameters.


This is what Velocity calls forcefeeding--we are telling Velocity that the opacity should
start from 0 and go to 1. Likewise, we are telling Velocity that the translateX property


should start at 200 pixels, ending at 0 pixels.


In general, we can avoid passing arrays to specify the initial value for the properties;


Velocity will calculate how to transition.


For example, we could have had the following CSS class:


p {
opacity: 0;
}

If we rewrite the Velocity call as follows:


Velocity(el,
{ opacity: 1 }
)

The car will slowly appear. Velocity queried the DOM for the initial value of the element


and then transitioned it to 1. The problem with this approach is that since a query to the


DOM is involved, some animations could be slower, especially when you have a lot of
concurrent animations.


Another way we can obtain the same effect as force-feeding is by using the begin option,
like so:


Velocity(el,
{ opacity: 1 },
{ begin: () => { el.style.opacity = 0 } }
)
Free download pdf