如何在没有硬编码高度的情况下使用 Vue.js 过渡？答案

【问题标题】：How can I use Vue.js transitions without hard coding height?如何在没有硬编码高度的情况下使用 Vue.js 过渡？
【发布时间】：2018-06-09 09:01:40
【问题描述】：

我有一个 Vue 应用程序，其中包含一个需要通过单击按钮来展开和折叠的元素。需要对效果进行动画处理以使其不那么刺耳。我为此使用了<transition> 标记，但除非我在css 中硬编码元素的height 属性，否则它不起作用。这不起作用，因为该元素包含动态数据并且具有不同的高度。

这是我的代码：

<template>
    <input type="button" value="Toggle" v-on:click="showIt = !showIt"/>
    <transition name="test-tran">
        <div class="test-block" v-show="showIt">
            <div v-for="item in items">{{ item }}</div>
        </div>
    </transition>
</template>

<script>
    export default {
        data() {
            return {
                showIt: false
            };
        }
    }
</script>

这里是对应的css：

.test-block {
    /*
    adding a height makes the transition work but
    an accurate height can't be known ahead of time

    height: 100px;
    */
}

.test-tran-enter-active {
    transition: all .5s ease;
}

.test-tran-leave-active {
    transition: all .5s ease;
}

.test-tran-enter, .test-tran-leave-to
    height: 0;
}

.test-tran-leave, .test-tran-enter-to
    /*
    adding a height makes the transition work but
    an accurate height can't be known ahead of time

    height: 100px;
    */
}

没有height 属性，元素可以正确显示和隐藏，但没有动画。它只是出现并立即消失。

如何在不对 css 中的高度进行硬编码的情况下使动画正常工作？

【问题讨论】：

标签： css vue.js transition

【解决方案1】：

不，这是一个纯 CSS 问题。为了过渡到工作高度，必须提供。不过，你可以用一种 hacky 的方式来解决它。

见How can I transition height: 0; to height: auto; using CSS?

【讨论】：