Анимация угловая работает только в ложном состоянии

Question

У меня есть одна анимация в angular fadein / fadeout, она работает нормально, прежде чем я обновлю angular v6 до v7.Мой код:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss', 
  ],
  animations: [
   trigger('hideShowAnimator', [
    state('true', style({ opacity: 1, display: 'block' })),
    state('false', style({ opacity: 0, display: 'none' })),
    transition('0 => 1', animate('200ms ease-in')),
    transition('1 => 0', animate('200ms ease-out'))
  ])
  ],

})

Итак, я применяю в своем div:

    <div [@hideShowAnimator]="abreNotificacoes" id="cardNotificacao" class="card">


   ...

<i (click)="abreNotificacoes = !abreNotificacoes"></i>

Теперь работает только мой fadeOut.почему?

Answer 1

Проблема display: 'none'. Если вы измените это значение на block, оно будет работать как положено, но если оно будет установлено на none, это означает, что оно не будет отображаться до окончания перехода, потому что стиль css с opacity: X, display: 'none', где X - любое значение, все равно никогда не будет отображаться.

animations: [
  trigger('hideShowAnimator', [
  state('true', style({ opacity: 1, display: 'block' })),
  state('false', style({ opacity: 0, display: 'block' })),
  transition('0 => 1', animate('200ms ease-in')),
  transition('1 => 0', animate('200ms ease-out'))
])],

См. этот стек

Answer 2

Я думаю, что дисплей: никто не может быть проблемой.Лучше использовать * ngIf при условии углового.

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss', 
  ],
  animations: [
  trigger('hideShowAnimator', [
    transition('void => *', [
      style({opacity:0}),
      animate(200ms ease-in, style({opacity:1})) 
    ]),
    transition('* => void', [
      animate(200ms ease-in, style({opacity:0})) 
    ])
  ])
})

  <div [@hideShowAnimator] id="cardNotificacao" class="card" *ngIf="abreNotificacoes">


   ...

<i (click)="abreNotificacoes = !abreNotificacoes"></i>

Answer 3

Вместо этого используйте свойство видимости, и если вы хотите избавиться от пространства, занимаемого контейнером, установите для свойства height значение 0 и наоборот.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('hideShowAnimator', [
      state('true', style({ opacity: 1, visibility: 'visible' })),
      state('false', style({ opacity: 0, visibility: 'hidden' })),
      transition('0 => 1', animate('500ms ease-in')),
      transition('1 => 0', animate('500ms ease-out')),
    ]),
  ],
})

Я заметил, что это происходит из-за изменения положения (x, y) поля и кнопки. Следующие работы работают, если они оба рядом:

<div style="display: flex; flex-direction: row;">
  <ul>
    <i (click)="toggle()">Click</i>
  </ul>
  <div [@hideShowAnimator]="abreNotificacoes" id="cardNotificacao" class="card">
    <img src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
  </div>
</div>