Угловая анимация, создающая слишком много элементов - PullRequest
Новая
       6

Угловая анимация, создающая слишком много элементов

0 голосов
/ 13 января 2019

Я хочу создать компонент, который, в зависимости от его свойства (который изменяется при нажатии кнопки), отображает один из двух элементов div (анимирует их, пока они «входят» и «уходят»). Код и демо: 

@Component({
  selector: 'my-app',
  template: `

  <button (click)="show = !show">change</button><br><br>

  <div @trigger *ngIf="show" style="width: 200px; height:200px;  background: rgba(0,0,0,.3);"></div>
  <div @trigger *ngIf="!show" style="width: 200px; height:200px;  background: red">

  </div>  
  `,
  animations: [
 trigger('trigger', [
      transition(':enter', [
        style({ width: '0' }),
        animate('3s ease-in', style({ width: '*' })),
      ]),
      transition(':leave', [
        animate('3s ease-in', style({ width: '0' }))
      ])
    ]),
  ]
})

export class AppComponent { 
  show: false;
}

https://stackblitz.com/edit/angular-2p2czs

Выше я разместил пример кода, однако он работает странным образом. Если анимация достаточно длинная и я пару раз быстро нажимаю на кнопку, она создает более 2 делений, чего я не хочу достичь. Любые идеи, как это исправить? Когда свойство изменяется, пока div все еще анимированы, я ожидаю, что они откатят анимацию из текущего состояния (не знаю, возможно ли это, хотя).

1 Ответ

0 голосов
/ 13 января 2019

код + демо

Это происходит потому, что ваша анимация вставляет / удаляет div, она начинается / заканчивается.

Для такого рода анимаций есть хитрость: если вы не хотите, чтобы Angular создавал много div-ов, вы можете сделать это, используя состояния вашей анимации, таким образом, DOM не создается / удаляется, а только изменяется стиль. 

<div [@trigger]="show ? 'visible' : 'hidden'"></div>
<div [@trigger]="!show ? 'visible' : 'hidden'"></div>

    trigger('trigger', [
      state('hidden', style({
        display: 'none',
      })),
      transition('hidden -> visible', [
        style({
          display: 'block',
          width: 0,
        }),
        animate('.5s ease', style({
          width: '*',
        }))
      ]),
      transition('visible -> hidden', [
        animate('.5s ease', style({
          width: 0,
        })),
      ])
    ]),
...