Я хотел создать анимацию границы, когда пользователь ожидает обновления статуса через веб-сокет.
Он работает следующим образом: после отправки статуса я добавляю класс загрузки, который использует правило css animation: borderAnimation 2s infinite и хотел бы динамически определять ключевые кадры для этой анимации, связывая с этим элементом также :style='myDynamicKeyframesDefinition', который выглядит следующим образом: это:
// this is a computed property
myDynamicKeyFramesDefinition () {
return `@keyframes borderAnimation {
0% {border: 2px solid ${this.currentStatusColor}}
50% {border: 2px solid ${this.nextStatusColor}}
100% {border: 2px solid ${this.currentStatusColor}}}`
}
Причина, по которой я использую такой подход, состоит в том, что у меня есть множество кодов состояния, между которыми пользователь может переключаться, поэтому запись всех комбинаций, вероятно, будет крайне неэффективной (поскольку они могут измениться в будущем, поэтому сохранение этого будет еще хуже )
Я не уверен, что это вообще возможно - любая помощь будет очень признательна!