Transitions and Animations Chapter 13At this point, we will create our own custom transition in CSS:
.slideInRight {
transform: translateX(200px);
}.go {
transition: all 2s ease-out;
}Wrap your car emoji in a Vue transition:
<transition
enter-class="slideInRight"
enter-active-class="go">
<p v-if="taxiCalled"> </p>
</transition>When you run your code and hit the Call a cab button, you will see a taxi stopping by.
How it works...
When we click on the button, the taxiCalled variable turns true and Vue inserts the taxi
into your page. Before actually doing this, it reads the classes you specified in enter-
class (in this case, only slideInRight) and applies it to the wrapped element (the
element with the taxi emoji). It also applies the classes specified in enter-class-active
(in this case, only go).
The classes in enter-class are removed after the first frame, and the classes in enter-
class-active are also removed when the animation ends.
The animation created here follows the FLIP technique that is composed of four points:
First (F): You take the property as it is in the first frame of your animation; in our
case, we want the taxi to start somewhere from the right of the screen.
Last (L): You take the property as it is in the last frame of your animation, which
is the taxi at the left of the screen in our case.
Invert (I): You invert the property change you registered between the first and
last frame. Since our taxi moved to the left, at the final frame it will be at say -200
pixel offset. We invert that and set the slideInRight class to have transform
as translateX(200px) so that the taxi will be at +200 pixel offset when it
appears.