Challenge 1 / 1

Our component that shows or hides a disclaimer message upon buying pizza slices has made a big impact in our customer's health! Yay!

But our CEO is not very happy with the visual results... Nay!

They now wants us to just fade in or out the message text itself (instead of adjusting the height) when a user wants to buy too much pizza. We can use Vue transitions for that!

Here's the initial component's template:

<template>
    <div>
        <button @click="addPizzaToCart" />

        <p v-show="showDisclaimer">
            <strong>Disclaimer</strong>: Eating too much pizza can be
            bad for your health!
        </p>
    </div>
</template>

How can we make it work using Vue transitions?

<template>
    <div :class="$style.component">
        <button @click="addPizzaToCart" />

       <transition>
            <p v-show="showDisclaimer">
                <strong>Disclaimer</strong>: Eating too much pizza can be
                bad for your health!
            </p>
       </transition>
    </div>
</template>

<style lang="scss" module>
.component :global {
    .v-enter, .v-leave {
        opacity: 0;
    }
}
</style>

<template>
    <div :class="$style.component">
        <button @click="addPizzaToCart" />

        <transition>
            <p v-show="showDisclaimer">
                <strong>Disclaimer</strong>: Eating too much pizza can be
                bad for your health!
            </p>
        </transition>
    </div>
</template>

<style lang="scss" module>
.component :global {
    .v-enter-active, .v-leave-active {
        transition: opacity 1s;
    }

    .v-enter, .v-leave {
        opacity: 0;
    }
}
</style>

<template>
    <div :class="$style.component">
        <button @click="addPizzaToCart" />

        <transition>
            <p v-show="showDisclaimer">
                <strong>Disclaimer</strong>: Eating too much pizza can be
                bad for your health!
            </p>
        </transition>
    </div>
</template>

<style lang="scss" module>
.component {
    .v-enter-active, .v-leave-active {
        transition: opacity 1s;
    }

    .v-enter, .v-leave {
        opacity: 0;
    }
}
</style>

<template>
    <div :class="$style.component">
        <button @click="addPizzaToCart" />

        <p v-show="showDisclaimer" transition>
            <strong>Disclaimer</strong>: Eating too much pizza can be
            bad for your health!
        </p>
    </div>
</template>

<style lang="scss" module>
.component :global {
    .v-enter-active, .v-leave-active {
        transition: opacity 1s;
    }

    .v-enter, .v-leave {
        opacity: 0;
    }
}
</style>

Rewatch the video