Анимация группы переходов меняет поведение при добавлении 3-го элемента

Question

Контекст : у меня есть div в верхней части страницы, которую я показываю / скрываю от кнопки.div находится под кнопкой и над содержимым.Я использовал transition-group, чтобы остальное содержимое скользило вверх / вниз по div, когда оно показывало / скрывало.Контент имеет margin-top, так что он ограничивает себя вышеупомянутым div, который показывает / скрывает.

Need : я хочу поле поверх div, чтобы при его отображении оставалось пространство между собой и кнопкой.https://imgur.com/UG5iakC

Проблемы : я пробовал 2 способа:

1) Поместить верхний край поля на укрытие div. Поскольку у меня есть position:absolute на div при его скрытии, чтобы содержимое превышало div, div изменяет размер до размера содержимого, и поэтому поле автоматически уменьшается;поэтому, когда он скрывается, поле уменьшается до того, как оно скрывается, и это ужасно. 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" 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, а свойство CSS transition связано с all, и , position устанавливается в absolute во время состояния leave-active (что приведет к тому, что элемент «исчезнет» из своего предыдущего, относительного положения в потоке макета), тогда многочисленные элементы и свойства будутпереходить одновременно, что приводит к нежелательным последствиям.

Однако, учитывая, что вопрос ищет решение без margin и hr поверх transition-group, и при условии, что кнопка имеет обработчик события, например так:

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

Функция toggleSlider переключит свойство isVisible, от которого зависит анимированный переход:

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

И с помощью CSS вместо перехода all, просто переходсвойства, которые достигнут искомого эффекта, а именно opacity, а с этим ответом max-height.Путем полного удаления абсолютного позиционирования и использования относительного положения плюс z-индексации с помощью следующего 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 , чтобы проиллюстрировать это решение.