Challenge 2 / 2

Imagine I have this element in a template that I'm transitioning to fade in and out:

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

<style lang="scss" module>
.component :global {
    .transition-testing {
        transition: opacity 1s;
    }
}
</style>

When we transition an element's opacity and try to show or hide this element using v-show, our transition breaks as shown in the video. Why is this so?

Because Vue's v-show directive overrides any class that deals with an element's opacity or display properties.

Because Vue's v-show directive cancels any transition rules that we apply to the element.

Because Vue's v-show directive makes the opacity property jump from 1 to 0 immediately.

Because Vue's v-show directive works on the display property of an element, which is not the property we're transitioning.

Rewatch the video