javascript - 过渡组动画在添加第三个元素时改变行为

Question

上下文:我在页面顶部有一个 div，我通过按钮显示/隐藏它。 div 位于按钮下方和内容上方。我使用了 transition-group 以便其余内容在显示/隐藏时在 div 上向上/向下滑动。内容有一个 margin-top，这样它就可以从上面显示/隐藏的 div 中限制自己。

需要:我想要在 div 顶部留一个边距，这样当它显示时，它在自身和按钮之间保留空间。 https://imgur.com/UG5iakC

问题:我试过两种方法:

1) 为隐藏的 div 放置一个 margin-top。因为我在 div 上有 position:absolute 隐藏它以便内容越过 div，div 调整到内容的大小，因此边距会自动变小；所以在隐藏它的时候，边距在隐藏之前会变小，而且很难看。动图:https://gph.is/2QInDfj

2) 在 div 上方添加一个 hr，在 transition-group 内。 没有 hr，幻灯片在 div 上按预期工作。但是，当我添加 hr 并单击以隐藏 div 时，幻灯片会按预期发生，但 div 和 hr 立即消失，而不是它显示和内容滑过它并覆盖它。动图: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" v-if="isVisible" id="filters" key='x'>
        <div class="pl-5">
            <p class="filterTitles">Day</p>
            <app-day-filter v-for="day in weekDay" 
                :key="day.index" 
                :day="day">
            </app-day-filter>
        </div>
        <div class="pl-5">
            <p class="filterTitles">Time of day</p>
            <app-tod-filter v-for="todf in tod" 
                :key="tod.index" 
                :todf="todf">
            </app-tod-filter>
        </div>
    </div>
    <app-event v-for='(eveniment, index) in filterEvent' 
        :key='index' 
        :eveniment='eveniment' 
        :index='index'></app-event>
</transition-group>

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; */
}

建议？

谢谢

Answer 1

这主要是一个 CSS 问题。

如果 hr 元素被引入到 transition-group 的布局中，并且 transition CSS 属性与 all, and, position 在 leave-active 状态期间被设置为 absolute (这将导致元素从其先前在布局流中的相对位置“消失”)，然后许多元素和属性将同时转换，从而导致不良效果。

但是，考虑到问题寻求的解决方案没有 margin 和transition-group hr，并假设按钮有一个事件处理程序，如下所示:

<button class="filter-button" v-on:click="toggleSlider">Filters</button>

toggleSlider 函数将切换动画转换所依赖的 isVisible 属性:

methods: {
  toggleSlider() {
    this.isVisible = !this.isVisible;
  }
}

并且使用 CSS，而不是转换 all，仅转换将实现所追求效果的属性，即 opacity，并且有了这个答案，最大高度。通过完全删除绝对定位，并使用相对位置加上 z-indexing 和以下 CSS，达到了预期的效果。

/* put margin spacing on the bottom of the button */
.filter-button {
  margin-bottom: 25px;
}

/* add relative positioning to enforce z-indexing */
.filter-group {
  position: relative;
  z-index: 1;
}

/* add relative positioning to enforce z-indexing */
.filter-content {
  position: relative;
  z-index: 2;
}

/* hidden states */
.slide-enter,
.slide-leave-to {
  opacity: 0;
  max-height: 0px;
}

/* shown states - max-height can be adjusted as desired */
.slide-enter-to,
.slide-leave {
  opacity: 1;
  max-height: 300px;
}

/* while animating during animation entry phase */
.slide-enter-active {
  transition: opacity 0.75s ease-in, max-height 0.5s ease-out;
}

/* while animating during the animation departure phase */
.slide-leave-active {
  transition: opacity 0.75s ease-out, max-height 0.5s ease-out;
}

/* add padding to bottom of filters section */
.pl-5 {
  padding-bottom: 25px;
}

通过在按钮和过滤器部分的底部添加边距，保留部分之间的间距。

我创建了一个 CodeSandbox来说明这个解决方案。