Background: I have a div positioned at the top of the page that can be toggled to show or hide using a button. This div sits below the button and above the main content area. To achieve a smooth sliding effect when the div is shown or hidden, I am utilizing the transition-group. Additionally, the content has a margin-top property to create space between itself and the toggleable div.
Requirement: I am looking to add a margin on top of the div so that when it is displayed, there remains a gap between the div and the button.
https://i.sstatic.net/6uPJm.jpg
Challenges Faced: I have attempted two approaches:
1) Applying a margin-top to the hiding div.
Due to the use of position:absolute on the div during hiding (for the content to overlay it), the div dynamically adjusts its size based on the content within, causing the margin to reduce gradually before the div actually hides, resulting in an undesirable effect.
GIF:
2) Inserting an hr element above the div, inside the transition-group. When the hr is omitted, the slide animation functions as expected, with the content smoothly sliding over the div. However, upon including the hr and attempting to hide the div, both the div and hr vanish instantly instead of maintaining visibility while being covered by the sliding content.
GIF:
Preferred Visual Outcome without the margin/hr on top:
HTML Code Snippet
<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 Styling Details
.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; */
}
Any suggestions or insights would be greatly appreciated.
Thank you.