Блог

Я пытаюсь выяснить, как динамически изменять продолжительность угловой анимации на основе нажатия кнопки. Я хотел бы иметь возможность установить кнопку для медленного, среднего и быстрого, которая обновляла бы «600 мс ease» на разные длительности, но я не могу успешно установить ее в переменную. Я попытался установить переменную с именем speed следующим образом:

переход(‘rest =>right’, анимировать(this.animationSpeed)),

но я получаю предупреждение о том, что «Объект, возможно, не определен».

Вот мой анимационный триггер. Кто-нибудь сталкивался с этой проблемой раньше?

анимации: [ триггер (‘MoveItem’, [

   state('right', style ({ 
    transform: 'translateX(45vw)',
  })),
  state('left', style ({ 
    transform: 'translateX(-45vw)',
  })),
 
  transition('rest =>right', animate('600ms ease')),
  transition('right =>left', animate('600ms ease')),
  transition('left =>right', animate('600ms ease')),
  transition('rest =>left', animate('600ms ease')),
  transition('left =>rest', animate('600ms ease')),
  transition('right =>rest', animate('600ms ease')),
 

Спасибо вам за уделенное время!

То, что вы пытаетесь сделать, на данный момент невозможно, angular не принимает изменение продолжительности с помощью параметров

Это может быть обходным путем

Свяжите его с помощью css в component.html файл

 <img src="anUrl"
   [ngStyle]="transition"
/>
 

Затем переключите анимацию внутри component.ts

 translation = {}

onRight(duration: string): void {
  translation = {
   'transition-duration.ms': duration,
   transform: 'translateX(45vw)',
 }
}


onLeft(duration: string): void {
  translation = {
   'transition-duration.ms': duration,
    transform: 'translateX(-45vw)',
 }
}
 

не забудьте добавить переход по умолчанию в файл component.scss

 img {
  transform: translate(0,0)
}
 

Это, конечно, не идеальное решение, но оно может помочь