角度动画:在按钮滑块上输入溢出文本

Question

文本将开始在按钮上设置动画，我希望它不应该在按钮的顶部。我添加了溢出：隐藏，但它不能正常工作。

演示：https://stackblitz.com/edit/angular-wetmep?file=src%2Fapp%2Fapp.component.html

animations: [
trigger('onOff', [
transition(':enter', [style({
opacity: 0,
transform: 'translateY(-100%)'
}),
animate(400)
])
])
]

Answer 1

您可以使用z-indexCSS属性在层中排列元素。

来自文档：

z索引较大的重叠元素覆盖了z索引较小的元素一

需要注意的一点是，z-index仅适用于已定位的元素。因此，按照以下方式设置position和z-index属性应该可以做到

.btn-style {
width:300px;
height:40px;
color:#fff;
background-color:slateblue;
position: absolute;
z-index: 2;
}
.text-style {
font-size:20px;
font-weight: 500;
padding:20px 0px 20px;
position: relative;
top: 40px;  /* button height */
z-index: 1;
}

我修改了你的Stacklitz

Answer 2

只需将动画更改为此即可获得所需结果：

animations: [
trigger('onOff', [
transition(':enter', [style({
opacity: 0,
transform: 'translateY(-50%)'
}),
animate(300)
])
])
]