Question

上下文：我在页面顶部有一个div，可以通过按钮显示/隐藏。 div在按钮下方和内容上方。我使用了transition-group，以便其他内容在显示/隐藏时在div上方/下方滑动。内容有一个margin-top，因此它受以上显示/隐藏的div的限制。

需要：我希望在div上方留一个边距，以便在显示时在其自身和按钮之间保留空间。 https://imgur.com/UG5iakC

问题：我尝试了两种方法：

1）在隐藏的div上放置页边空白。 因为我在隐藏position:absolute时在div上有div，所以内容超过了div，所以hr的大小调整为内容的大小，因此边距得到了自动变小；因此，在隐藏它时，边距会在隐藏之前变小，并且很难看。 GIF ：https://gph.is/2QInDfj

2）在div内transition-group上方添加hr。如果没有div，幻灯片将按预期工作，在hr上。但是，当我添加div并单击以隐藏div时，幻灯片会按预期发生，但是hr和<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>会立即消失，而不是显示内容滑过它并覆盖它。 GIF ：https://gph.is/2yd4JGt

所需的视觉效果，顶部没有边距/小时： https://gph.is/2OPZyFV

HTML

.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

*ngIf

建议？

谢谢

Answer 1

这主要是CSS问题。

如果hr元素被引入到transition-group中的布局中，并且transition CSS属性与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。通过完全删除绝对定位，并在以下CSS中使用相对位置加z-indexing，可以达到预期的效果。

/* 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来说明此解决方案。

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

1 个答案: