使用Vue淡入容器元素的内容时向其添加转换

我有这个vue组件:

<template>
    <div class="container">
        <h2>Title</h2>
        <p>Lorem ipsum</p>    
        <button @click="toggleNotes">
            Notes
        </button>
        <transition name="fade">
            <div v-if="showNotes">
                <p>Some random notes here</p>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showNotes: false,
        }
    },
    methods: {
        toggleNotes() {
            this.showNotes = ! this.showNotes
        }
    }
}
</script>

<style>
    .fade-enter-active {
        transition: opacity .5s;
    }
    .fade-leave-active {
        transition: opacity .1s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

这是可行的,只要点击按钮时音符淡入淡出。但是集装箱 div 根据出现/消失的文本在转换前后的高度跳跃。是否有方法让容器也设置其高度的动画而不是跳跃?问题是高度不能预先知道-笔记区域的文本数量是任意的。