VueJS-框大小调整不会阻止div的高度受填充影响

Question

我有一个使用引导卡类的div，并且我希望div的底部具有0的高度，以便可以对其进行扩展。扩展进行得很好，但是当我单击扩展时，框从填充的高度而不是0的高度开始。因此，这意味着您单击扩展时会看到高度为40px（填充为20px）的框，并且该框没有动画，只有当动画达到40px以上的点时，您才开始看到扩展，直到卡达到其自动高度

因此，问题显然是填充物正在影响盒子的高度。当我给框0填充时，动画效果很好！因此，我尝试在卡片说明（展开的部分）中添加框大小，但这并不能解决问题，高度为0的框仍为40px高。

我该如何解决？

Card.Vue（过渡已被注释掉，它工作正常，但我想将测试类的div的高度设置为0，因为这可以解决问题。在测试中，带有类test的div的高度为40px浏览器）

<template>
    <div class="card">
        <div class="card-header">
            {{ title }}
            <i v-on:click="show=!show" class="fas fa-chevron-down float-right"></i>
        </div>
        <!-- <TransitionHeight>
            <div v-if="show" class="card-body">{{description}}</div>
        </TransitionHeight>-->
        <div class="test">{{description}}</div>
    </div>
</template>

<script>
import TransitionHeight from "../utility/TransitionHeight.vue";
export default {
    name: "Card",
    components: {
        TransitionHeight
    },
    props: {
        title: String,
        description: String
    },
    data() {
        return {
            show: false
        };
    }
};
</script>

<style scoped>
.test {
    height: 0px;
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
}
</style>

TransitionHeight.Vue

<template>
    <transition name="expand" @enter="enter" @after-enter="afterEnter" @leave="leave">
        <slot class="box-size" />
    </transition>
</template>

<script>
export default {
    name: "TransitionHeight",
    methods: {
        enter(element) {
            const width = getComputedStyle(element).width;
            element.style.width = width;
            element.style.position = "absolute";
            element.style.visibility = "hidden";
            element.style.height = "auto";
            const height = getComputedStyle(element).height;
            element.style.width = null;
            element.style.position = null;
            element.style.visibility = null;
            element.style.height = 0;
            getComputedStyle(element).height;
            setTimeout(() => {
                element.style.height = height;
            });
        },
        afterEnter(element) {
            element.style.height = "auto";
        },
        leave(element) {
            const height = getComputedStyle(element).height;
            element.style.height = height;
            getComputedStyle(element).height;
            setTimeout(() => {
                element.style.height = 0;
            });
        }
    }
};
</script>

<style scoped>
* {
    will-change: height;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}
</style>

<style>
.box-size {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.expand-enter-active,
.expand-leave-active {
    transition: height 0.333s ease-in-out;
    overflow: hidden;
}
.expand-enter,
.expand-leave-to {
    height: 0;
}
</style>