Transitions and Animations Chapter 13Vue will calculate the difference between the final frame and the starting frame and will
apply styles to make the buses appear in the initial frame even if they are not. The styles
will be removed after one frame. The reason the buses slowly crawl to their final frame
position instead of immediately moving in their new position is that they are span
elements and we specified that any transform style (the one used by Vue to fake their
position for one frame) must be transitioned for two seconds:
.station-move {
transition: 2s;
}In other words, at frame -1, the three buses are all in place and their position is recorded.
At frame 0, the first bus is removed from the flow of the page and the other buses are
instantaneously moved behind it. In the very same frame, Vue records their new position
and applies a transform that will move the buses back to where they were at frame -1
giving the appearance that nobody moved.
At frame 1, the transform is removed, but since we have a transition, the buses will slowly
move to their final position.
Animating the state of your components
In computers, everything is a number. In Vue, everything that is a number can be animated
in one way or other. In this recipe, you will control a bouncy ball that will smoothly
position itself with a tween animation.