Угловая анимация, создающая короткое выделение
Проблема
Недавно я хотел вкратце выделить элемент с анимацией Angular. Но я не нашел способа сделать это без государства. Итак, вот что я придумал:
Временное решение
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
@smnbbrv, я думаю, он хочет сделать это без использования состояния (But i did not find a way to do it without a state). Для меня в любом случае было бы лучше переключить класс css и обрабатывать анимацию отдельно, чтобы вы могли запускать анимацию без необходимости состояния. Анимация в angular служит разным целям. Я думаю, что что-то вроде [class.hasError] = "hasError" было бы здесь самым быстрым (пока hasError в css предоставляет анимацию)
@briosheje, спасибо, но угловые анимации - это все о состоянии. Либо вы используете это, либо old-school css. Существуют миллионы примеров CSS-анимации, так в чем же тогда вопрос?
@smnbbrv Я согласен с вами, это было просто для того, чтобы поднять суть вопроса (как он упомянул, решение, которое он нашел работает, но это не то, что он хочет).
Я думал, что это решение, которое я придумал, довольно грязное, поэтому я подумал, что может быть что-то, чего мне не хватает, и есть некоторые функции, которые я мог бы использовать, чтобы сделать его менее грязным. Идея с классом css такая же, как и у меня ...
@Joniras, похоже, это правильный / самый быстрый способ. Angular-анимации были построены на состояниях, поэтому отказ от использования состояний не делает их полезными в вашем случае. Есть ли причина, по которой вам не нравится подход [class]? кроме необходимости писать анимацию css на ... css.
@briosheje подход css почти такой же, как у меня (мне также нужно потом удалить класс). Так что либо мне нужно написать анимацию css, либо я должен написать анимацию в angular. Но это действительная альтернатива c.
@Joniras, что здесь называется грязный? Что бы вы хотели изменить? Что именно вас беспокоит?
@smnbbrv Меня беспокоит, что мне нужно удалить атрибут, который либо запускает css-, либо angular анимацию. И мне нужно установить эту анимацию [@highlightRed='....'] на каждый элемент отдельно. То же самое с анимацией css. Я подумал, что, возможно, есть более чистый / простой / короткий способ сделать это. Но если нет, то я приму свою судьбу.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не очень разбираюсь в переходах Angular, но понимаю, что Angular запускает анимацию, когда что-то меняется. Что-то меняется, когда что-то отображается или когда изменяется переменная.
Некоторым нравится
<div [@highlightRed] >..</div>
transition('void=>*', animate(2000,, keyframes([..])),
сначала создать переход компонента (или если у вас есть * ngIf = "condition")
Некоторым нравится
<div [@highlightRed] = "value" >..</div>
transition('void=>*', animate(0)),
transition('*=>*', animate(2000,, keyframes([..])),
вызвать анимацию, если вы сделаете
<button (click) = "value=!value">click</button>
Обратите внимание, что вам не нужно объявлять "ценность" в .ts.
Это работает, только если у меня есть один элемент на странице, который должен быть выделен и может быть запущен только через тот же компонент в html. Очень ограничен...
в чем точная проблема? Он отлично работает, если вы спросите меня ...