角度动画出现在它应该滑入的元素的顶部
角度动画出现在它应该滑入的元素的顶部
提问于 2019-04-15 04:04:04
我有一个div，它在一个列表组中，我正在尝试根据切换开关的状态滑入/滑出。问题是，当动画发生时，它会放在div之前，我希望它会放在后面，这样外观才会正确。
这是针对Angular和Bootstrap 4的。我遵循了一篇关于如何开始使用Angular Animations的教程，还尝试将样式添加到列表组和div (以及控制器中)，以根据我完成的几个google搜索来调整z索引。
动画的div如下所示。
<div class="list-group" style="z-index: 9">
<div class="list-group-item">
<!-- toggle switch is right here --->
<div class="recurringSchedule border-top py-2" *ngIf="expense.recurring" [@slideInOut]>
...
</div>
</div>
</div>动画在我的控制器中是这样定义的。
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css'],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)', zIndex: '-5'}),
animate('400ms ease-in', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
style({zIndex: '-5'}),
animate('400ms ease-in', style({transform: 'translateY(-100%)'}))
])
])
]
})我预计recurringSchedule div会根据切换开关状态分别在列表组或列表组项目后面上下滑动。但它在列表组前面向上/向下滑动，因此您可以看到整个动画，而不是隐藏其中的一部分。
更新
根据评论中的请求，我创建了一个stackblitz来演示这个问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-15 04:48:30
问题是您正在使用position: relative对元素进行动画处理。定位的元素总是比静态定位的元素具有更高的z索引。为了解决这个问题，我建议将两个p标记包装在一个div中，并给它一个position: relative和一个更高的z索引。
这是你的stackblitz和我的更改：https://stackblitz.com/edit/angular-hdbzwg
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55679533
复制相关文章
相似问题