Угловая анимация, появляющаяся поверх элемента, должна скользить в - PullRequest
Новая
       14

Угловая анимация, появляющаяся поверх элемента, должна скользить в

0 голосов
/ 14 апреля 2019

У меня есть div, который находится внутри группы списков, которую я пытаюсь вставить / вывести на основе состояния тумблера.Проблема в том, что когда происходит анимация, она идет перед div, и я ожидаю, что она будет отставать, чтобы внешний вид был правильным.

Это для Angular и Bootstrap 4. Я следовал заучебник о том, как начать работу с Angular Animations, а также попытался добавить стили как в группу списка, так и в div (а также в контроллер), чтобы настроить z-индекс на основе нескольких выполненных мной поисков в Google.

Анимационный 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%)'}))
          ])
        ])
    ]
})

Я ожидаю, что div recurringSchedule будет скользить вниз ивверх в зависимости от состояния тумблера соответственно за группой списков или элементом группы списков.Но он перемещается вверх / вниз перед группой списков, поэтому вы видите всю анимацию, а не ее скрытую часть.

ОБНОВЛЕНИЕ

В соответствии с запросом вкомментарии, я создал стек, который демонстрирует проблему.

https://angular -z2lavg.stackblitz.io

1 Ответ

1 голос
/ 14 апреля 2019

Проблема в том, что вы анимируете элемент с помощью position: relative. Позиционированные элементы всегда будут иметь более высокий z-индекс, чем статические позиционированные элементы. Чтобы это исправить, я предлагаю обернуть два тега p в элемент div и присвоить ему position: relative и более высокий z-индекс.

Вот ваш стек с моими изменениями: https://stackblitz.com/edit/angular-hdbzwg

...