Анимация угловых 4+ ключевых кадров, оставайтесь на последней позиции - PullRequest
Новая
       11

Анимация угловых 4+ ключевых кадров, оставайтесь на последней позиции

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

Я работаю над приложением Ionic3 / Angular4, и я использую угловую анимацию, чтобы перемещать предмет по моему экрану, и все работает, за исключением того, что в конце анимации div сбрасывается в исходное положение, а не остается в последнем позиция, где анимация закончилась,

Я знаю, что в CSS вы можете просто добавить «вперед» к вашей анимации, и она останется там, но как вы реализуете это в компоненте?

PageCode: 

      transition('* => move',
    animate('2500ms', keyframes([
      style({ transform: 'translateX(0)', offset: 0 }),
      style({ transform: 'translateX(100%)', offset: 0.33 }),
      style({ transform: 'translateX(40%)', offset: 0.66 }),
      style({ transform: 'translate({{x}},{{y}})', offset: 1.0 })

    ]),        
    ))

HTML: 

  <div class="image_container">
<a class="rotator" [@photoState]="{value: visibleState, params: {x: finalXState,y:finalYState}}"(@photoState.done) = "restart($event)" >
  <div class="rotator_frame"></div>
</a>

В этом случае я хочу, чтобы «ротатор» остановился и остался на параметрах X и Y

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 06 апреля 2019

Эй, приятно, что ты нашел способ сделать это! У меня тоже была такая же проблема. Я узнал, как добиться этого другим способом, где вы держите это в разделе анимации и не нуждаетесь в дополнительном выборе запроса. В дополнение к переходу с ключевыми кадрами, которые вы написали, вы можете добавить определение состояния со стилями. Это должно быть что-то вроде стиля, который вы определили в последнем кадре. 

state('move', style({ transform: 'translate({{x}},{{y}})'),
   transition('* => move',
    animate('2500ms', keyframes([
      style({ transform: 'translateX(0)', offset: 0 }),
      style({ transform: 'translateX(100%)', offset: 0.33 }),
      style({ transform: 'translateX(40%)', offset: 0.66 }),
      style({ transform: 'translate({{x}},{{y}})', offset: 1.0 })

    ]),        
    ))

Кроме того, в этом случае определение смещения может быть опущено, поскольку кадры неявно разнесены по времени анимации. Я знаю, что это слишком поздно для вас, MarkwinVI, но, возможно, это может помочь кому-то еще.

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

Наконец-то нашел способ сделать это:

на вашем анимированном элементе вызовите событие .done, например

(@photoState.done) = "restart($event)"

и затем в вашей функции (в моем случае функция restart ()) 

restart(e) {
document.querySelector('.rotator').setAttribute('style',
"transform: translate("+ this.finalXState +", "+ this.finalYState +")");

}

...