Vue.js Vue滑动切换不平滑

试图建立一个手风琴菜单。菜单下项目的动画是平滑的，但菜单的关闭和打开不是平滑的

我发现了两个这样的例子。但是还不能解决我的问题

这是到目前为止我的代码。你知道我该如何解决这个问题吗

<template>
<div class="accord">
    <div v-for="group in groups">
        <a class="menu_grps" v-on:click="group.open = !group.open" v-text="group.name"></a>
        <div id="anim">
        <transition name="slide">
        <div v-show="!group.open">
            <div v-for="item in group.items" v-text="item"></div>
        </div>
        </transition>
        </div>
    </div>
</div>
</template>


<script>
export default {
data() {
    return {
        groups: {
            "group 1": {
                name: "Menu 1",
                open: "false",
                items: ['item1', 'item2']
            },
            "group 2": {
                name: "Menu 2",
                open: "false",
                items: ['item1', 'item2', 'item3']
            },
            "group 3": {
                name: "Menu 3",
                open: "false",
                items: ['item1', 'item2', 'item3', 'item4']
            }
        }
    }
}
}
</script>

<style>

.slide-leave-active,
.slide-enter-active {
transition: all .5s ease;
}
.slide-enter,
.slide-leave-to{
opacity: 0;
transform: translateY(-100%);
margin-bottom: -10px;
}
.menu_grps{
background-color: #BFAEAB;
font-size: 18px;
}
#anim {
overflow: hidden;
}
.accord{
display: flex;
flex-direction: column;
}

</style>

导出默认值{
数据（）{
返回{
小组：{
“第一组”：{
名称：“菜单1”，
打开：“假”，
项目：['item1'，'item2']
},
“第2组”：{
名称：“菜单2”，
打开：“假”，
项目：['item1'，'item2'，'item3']
},
“第3组”：{
名称：“菜单3”，
打开：“假”，
项目：['item1'，'item2'，'item3'，'item4']
}
}
}
}
}
.滑动保持活动状态，
.滑入激活状态{
过渡：所有。5s轻松；
}
.滑入，
.向左滑到{
不透明度：0；
转换：translateY（-100%）；
边缘底部：-10px；
}
.菜单{
背景色：#BFAEAB；
字号：18px；
}
#动画{
溢出：隐藏；
}
.雅阁{
显示器：flex；
弯曲方向：立柱；
}

如果将页边距底部更改为-100px，因为它位于下方，则会变得更加平滑：

.slide-enter,
.slide-leave-to{
opacity: 0;
transform: translateY(-100%);
margin-bottom: -100px;
}

---

在这里，您可以找到一个关于该主题的好方法：。不要将边距或填充添加到正在设置动画的元素中，最好将它们添加到其子元素中。