Challenge 1 / 2

Imagine I have a simple component that can show a message when one of our customers has bought too much pizza.

<template>
    <div :class="{
            [$style.component]: true,
            [$style.tall]: showDisclaimer,
        }"
    >
        <button @click="addPizzaToCart" />

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

<script>
import { buyPizza } from '@/services/buy-pizza';

export default {
    name: 'PizzaCheckout',
    data() {
        return {
            pizzaCount: 0,
            showDisclaimer: false,
        };
    },
    methods: {
        async addPizzaToCart() {
            await buyPizza();

            this.pizzaCount++;
            if (this.pizzaCount > 10) {
                this.showDisclaimer = true;
            }
        }
    },
};
</script>

In an application where this component has a fixed height, I want to add some styling so that its height will transition smoothly when that message toggles on and off.

Which style tag would be good for the job?

<style lang="scss" module>
.component {
    height: 200px;

    &.tall {
        height: 400px;
    }
}
</style>

<style lang="scss" module>
.component {
    height: 200px;
    transition: height;

    &.tall {
        height: 400px;
    }
}
</style>

<style lang="scss" module>
.component {
    height: 200px;
    transition: height 1s;

    &.tall {
        height: 400px;
    }
}
</style>

<style lang="scss" module>
.component {
    height: 200px;
    transition: height 1s;
}
</style>

Rewatch the video