Transitions and Animations Chapter 13How it works...
The core of our app is the
their key:
<transition-group tag="p" name="station">
<span v-for="bus in buses" :key="bus"> </span>
</transition-group>Whenever a bus enters or leaves the scenes, a FLIP animation (see the Adding your own
transition classes recipe) will be automatically triggered by Vue.
To fix ideas, let's say we have buses [1, 2, 3] and bus 1 leaves the scene. What happens next
is that the properties of the first bus's element will be memorized before the
animation actually starts. So we may retrieve the following object describing the properties:
{
bottom:110.4375
height:26
left:11
right:27
top:84.4375
width:16
}Vue does this for all the elements keyed inside the
After this, the station-leave-active class will be applied to the first bus. Let's briefly
review what the rules are:
.station-leave-active, .station-enter-active {
transition: all 2s;
position: absolute;
}We note that the position becomes absolute. This means that the element is removed from
the normal flow of the page. This in turn means that all the buses behind him will suddenly
move to fill the space left blank. Vue records all the properties of the buses at this stage also
and this is considered the final frame of the animation. This frame is not actually a real
displayed frame; it is just used as an abstraction to calculate the final position of the
elements: