上下文:我在页面顶部有一个 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; */
}
建议?
谢谢
最佳答案
这主要是一个 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来说明这个解决方案。
关于javascript - 过渡组动画在添加第三个元素时改变行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52749777/