Анимация :leave не работает при *ngif = false в angular5

159

29 августа 2018, 02:20

Всем привет) искал по сети так и не нашел ответа. Есть анимация в angular 5:

animations: [
    trigger('slideIn', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(1500)
      ]),
      transition('* => void', [
        animate(1500, style({transform: 'translateX(100%)'}))
      ])
    ])
 ]

И есть некий:

<div class="row"   *ngIf = "name === 'good mood'" >
  <div  [@slideIn]   class="col-md-3" *ngFor="let image of images.slice(0,4); let i = index;"   >
    <div >
      <div>
        <img  src="{{  image.url   }}" >
      </div>
    </div>
  </div>
</div>

name - это переменная инпута что было введено. При *ngIf === false анимация "входа" элемента работает правильно но "ухода" не работает. Знаю что при ngif удаляется дом элемент, но читал на пабликах что анимация ухода должна работать. Спасибо всем.

Answer 1

Нужно [@slideIn] переместить вверх *ngIf

<div class="row"  [@slideIn]  *ngIf = "name === 'good mood'" >
  <div class="col-md-3" *ngFor="let image of images.slice(0,4); let i = index;"   >
    <div>
      <div>
      {{i+1}}  <img  src="{{  image.url   }}"   >
      </div>
    </div>
  </div>
</div>