November 2017
Beginner to intermediate
398 pages
8h 42m
English
At this point, there is something missing--the overlay background. We can't include it inside the overlay component because it would be zoomed during the animation--this would be quite awkward. Instead, we will use the simple fade animation we have created already.
In the main template, add a new div element with the overlay-background class just before the zoom transition and the overlay component:
<transition name="fade"> <div class="overlay-background" v-if="activeOverlay" /></transition>
With the v-if directive, it will only be displayed when any overlay is displayed.
Read now
Unlock full access