Как создать бесконечную анимацию с помощью Angular6?

#angular #typescript #animation

#angular #typescript #Анимация

Вопрос:

Я создал 3D грузовик, используя html и css. Если любая переменная (x) имеет значение true, шины грузовика поворачиваются на 360 градусов. Если x = false, шины грузовика останавливают вращение. Я делаю это с помощью css только для бесконечного поворота.

 .whell{
   animation: round 2s infinite linear ;
}

 @keyframes round {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
   }

Этот css-код работает, но не останавливается в зависимости от переменной. Я решил сделать с помощью Angular анимации;

 animations: [

    trigger('x',[
      state('true', style({
        transform: 'rotate(360deg)'

      })),

      transition('* => *', animate('2s'))

    ])
  ]

Шины грузовика вращаются, но всего 2 секунды.. Есть ли способ поворачивать ее бесконечно в Angular6? Я хочу бесконечную, а не 2 секунды. Я был бы признателен, если бы вы помогли. Спасибо…

Ответ №1:

Как насчет использования этого следующим образом:

[ngClass]=»x?’whell’:’classWithNoAnimation'»

если x равно true, то переключитесь на hell, в противном случае переключитесь на classWithNoAnimation