vue.js - vuejs输入和输出转换不​​起作用

Question

我正在设计登录和注册页面，但没有以任何方式执行转换，我想知道我哪里出错了？

我想要做的是对单击的任何按钮应用淡入淡出，但它不起作用。我是 vuejs 新手，请在评论或评论时记住这一点

<template>
<article class="card">
        <div class="card-body">
            <div>
                <div class="d-inline-flex justify-content-center w-100 rounded-2 border border-2 bg-gray-2">
                    <button class="btn btn-lg w-50"
                            @click="active='login'"
                            :class="{'btn-white': active === 'login' }">LOGİN
                    </button>
                    <button class="btn btn-lg w-50"
                            @click="active='register'"
                            :class="{'btn-white': active === 'register' }">REGİSTER
                    </button>
                </div>
            </div>
            <transition name="fade" mode="out-in">
                <div v-if="active === 'login'">
                    <h1>LOGİN</h1>
                </div>
                <div v-else>
                    <h1>REGİSTER</h1>
                </div>
            </transition>
        </div>
    </article>
</template>
<script>
export default {
    name: "Page1",
    data() {
        return {
            active: 'login',
        }
    }
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
    opacity: 1;
    transition: opacity 0.3s;
}

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