Angular5动画/绑定数据转换的转换

Question

我在Angular5中有一个非常简单的模板绑定。

<div class="digitsArea">
   {{this.questionsArray[ticks - 1]}}
</div>

此处 ticks 由代码中的间隔设置。每当这个值发生变化时，我想要一个非常简单的动画/过渡（例如，颜色变化并恢复正常）。

我无法做到这一点，因为我经历的教程改变了用户点击/等等的内容。

请帮忙。

编辑：

<ng-template #testContainer>
<div id="testArea">
  <div class="testHeading">
    <h3>Addition Test</h3>
  </div>
  <div class="digitsArea" [@myAwesomeAnimation]='ticks'>
    {{this.questionsArray[ticks - 1]}}
  </div>
  <div class="userInputArea" *ngIf='this.ticks == this.questionsArray.length'>
      <div class="ui-inputgroup">
          <input type="text" pInputText placeholder="Your Answer">
          <button pButton type="button" label="Submit" (click)="displayAnswer($event)"></button>
      </div>
  </div>
  <div class="answerArea font-weight-bold" *ngIf='showAnswer && (this.ticks == this.questionsArray.length)'>
      <h4>Correct Answer {{answer}}</h4>
  </div>
  <div class="answerArea font-weight-bold" *ngIf='showAnswer'>
      <p-button label="Go Back" (onClick)="goBack($event)"></p-button>
  </div>
</div>