小编bgd*_*mhl的帖子

上下文:我div在页面的顶部显示/隐藏按钮.的div是按钮下和内容的上方.我已经习惯transition-group了其余内容div在显示/隐藏时向上/向下滑动.内容有一个margin-top限制自己从div显示/隐藏的上述内容.

需要:我想要一个上边距,div这样当它显示时,它会保留自身和按钮之间的空间. https://imgur.com/UG5iakC

问题:我尝试了两种方法:

1)在隐藏处放置边距顶部div. 因为我position:absolute对div隐藏,当它使内容得到过div的div大小调整为内容的大小,所以Margin获取自动变小; 因此,当隐藏它时,边缘会在隐藏之前变小,而且很难看. GIF:https://gph.is/2QInDfj

2)添加hr上面的div,里面的transition-group.没有它hr,幻灯片就像预期的那样工作div.但是,当我加入hr并点击隐藏div,滑动发生,正如预期,但div并hr瞬间消失,而不是它在显示和内容滑过并覆盖它. GIF:https://gph.is/2yd4JGt

期望的视觉效果没有保证金/小时:https: //gph.is/2OPZyFV

HTML

<transition-group name="slide">
    <hr class="m-0" v-if="isVisible" key='h'>
    <div class="d-flex" …