Transitions and Animations Chapter 13
</transition-group>
</div>
To make the buses move around, we need to specify some CSS rules under the prefix
station:
.station-leave-active, .station-enter-active {
transition: all 2s;
position: absolute;
}
.station-leave-to {
opacity: 0;
transform: translateX(-30px);
}
.station-enter {
opacity: 0;
transform: translateX(30px);
}
.station-move {
transition: 2s;
}
span {
display: inline-block;
margin: 3px;
}
Launching the app now will result in an orderly queue of buses in which one leaves or
arrives every two seconds: