Question

我想知道如何在项目中的特定图像上应用动画。该项目由一组问题组成，这些问题用一种进度条显示。根据回答的问题数量来设置僵尸。每个回答的问题都会让僵尸更进一步。

如您所见，我使用style.left来设置僵尸的位置。

HTML：

<div class="animation-content">
  <div class="image">
    <img src="assets/moonwalk.gif" class="walk" [style.left]="positionAvatar">
  </div>
  <span class="track"></span>
  <span class="flag"></span>
</div>

TS：

 if(this.setProgressBar.progress(this.answeredQuestions.length, this.theme.data.length) > 0) {
   this.positionAvatar = (this.setProgressBar.progress(this.answeredQuestions.length, this.theme.data.length) * 0.9) + "%";
 }

结果：

using .close() repeatedly is okay

然而，我并没有想出如何为它添加过渡效果。我试过CSS，但它没有成功。我想在改变其位置后顺利过渡。我如何使用CSS或Angular 2制作它？谢谢:)）

通过Angular 2动画图像

0 个答案: