添加第3个元素时,过渡组动画会更改行为

上下文:我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

    

    

        

            
Day
            
            
        
        

            
Time of day
            
            
        
    
    

CSS

.slide-enter {
    opacity:0;
}
.slide-enter-active {
    transition: all 1s ease-out;
}
.slide-leave-active{
    transition: all 1s ease-out;
    opacity: 0;
    position: absolute;
}
.slide-move {
    transition: transform 1s;
}
#filters {
/* border-top: 1px solid lightgrey; */
}

建议？

谢谢