angular анимация: введите текст переполнения при нажатии кнопки

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-index CSS для упорядочивания элементов в слоях.

Из документов:

Перекрывающиеся элементы с большим 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;
}

Я изменил ваш Stackblitz

Answer 2

Просто измените анимацию на это, и вы получите желаемый результат:

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