Angular Animation, которая создает короткую подсветку - PullRequest
Новая
       69

Angular Animation, которая создает короткую подсветку

0 голосов
/ 18 октября 2018

Проблема

Недавно я хотел вкратце выделить элемент с угловой анимацией.Но я не нашел способа сделать это без государства.Итак, вот что я придумал:

Временное решение 

animations: [
    trigger('highlightRed', [
      transition('*=>hasError', animate('2000ms', keyframes([
        style({backgroundColor: 'initial', boxShadow: 'none', offset: 0} ),
        style({backgroundColor: '#ff5c4c', boxShadow: '0 0 5px #ff5c4c', offset: 0.1} ),
        style({backgroundColor: 'initial', boxShadow: 'none', offset: 1} ),
      ])))
    ])
  ]

...
...

public showError(){
   this.errorState = "hasError";
}

<span [@highlightRed]="errorState" (@highlightRed.done)="errorState = ''">

Демонстрация StackBlitz

Вопрос

Этот тип анимации возможен даже с Angular (-Animations), или мне нужно использовать анимацию css старой школы и как бы я в идеале запускал их?

Версии

Угловой 7

1 Ответ

0 голосов
/ 21 декабря 2018

Я не знаю много о переходах Angular, но я понимаю, что Angular запускает анимацию, когда «что-то» меняется.Что-то меняется, когда некоторые отображаются или когда меняется переменная.

Некоторые, например, 

  <div [@highlightRed] >..</div>

  transition('void=>*', animate(2000,, keyframes([..])),

создают переход вначале компонента (или если у вас есть * ngIf = "условие"))

Некоторые, такие как 

  <div [@highlightRed]="value" >..</div>

  transition('void=>*', animate(0)),
  transition('*=>*', animate(2000,, keyframes([..])),

запускают анимацию, если вы создаете 

  <button (click)="value=!value">click</button>

Обратите внимание, что вам не нужно объявлять "значение" в .ts

...