angular 动画：在按钮滑入中输入溢出文本

Question

文本将在按钮上方开始动画，我希望它不应该在按钮上方。我添加了 overflow:hidden 但它没有正常工作。

演示：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-index CSS 属性分层排列元素。

来自文档：

Overlapping elements with a larger z-index cover those with a smaller one.

需要注意的一件事是 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;
}

我修改了你的Stackblitz

Answer 2

只要将你的动画改成这样，你就会得到想要的结果：

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

angular 动画：在按钮滑入中输入溢出文本

angular animation :enter overflow text on button slidein

angular

angular-animations