角度动画和动态更新值答案

【问题标题】：Angular Animations and Dynamically updating values角度动画和动态更新值
【发布时间】：2019-09-06 18:35:13
【问题描述】：

我正在尝试创建一个测验，我想一次显示一个问题。我想在每个问题之间制作动画。

我的方法是遍历问题的 json 对象并将它们显示在一个列中。我创建了一个角度动画，我在其中设置了 transformY，但是为了让它成为动态的，我需要找到一种方法来动态设置这个值。

HTML 代码如下：

<div [@slide]="isUp ? 'up' : 'down'" *ngFor="let question of questions">
    <h2>{{ question.question }}</h2>
</div>

组件中的动画

animations: [
   trigger('slide', [
      state('up', style({
         opacity: 1,
         transform: 'translateY(dynamicallySetValue)', 
    })),
   state('down', style({
      opacity: 0,
      transform: 'translateY(dynamicallySetValue)',
   })),
   transition('up => down', [
    animate('0.5s ease-in')
   ]),
   transition('down => up', [
    animate('0.5s ease-in')
   ]),
 ]),
],

有没有办法将 translateY() 设置为根据 div 高度变化的动态值？

【问题讨论】：

标签： angular css-animations angular-animations

【解决方案1】：

在杂草丛生了一段时间后，我想出了以下解决方案，供其他可能有兴趣做类似事情的人使用。

我的方法是改变 from 和 to 状态。

 <div [@scrollAnimation]="isUp? fromState:toState" 
 (@scrollAnimation.done)="onAnimationEvent($event)" *ngFor="let question of 
 questions, let i = index">
    <h2>{{i+1}}. {{ question.question }}</h2>
 </div>

然后我会在单击上一个或下一个调用 toggle() 函数时动态更新问题索引。

toggle(direction) {
   this.isUp = true;
   this.direction = direction;
   if(direction == 'up')
   {
     this.toState = "normal";
     this.fromState = "down";
     if(this.activeQuestion < this.questions.length-1)
       this.activeQuestion++;
   }
   if(direction == 'down')
   {
     this.toState = "normal";
     this.fromState = "up";
     if(this.activeQuestion > 0)
        this.activeQuestion--;
   }
 }

然后我将变量 isUp 设置为 true，这将调用动画，完成后它将调用更新状态的 onAnimationEvent() 函数。

 onAnimationEvent ( event:AnimationEvent ) {
    if(this.direction == "up")
    {
       this.fromState = "down";
       this.toState ="normal"; 
    }
    if(this.direction == "down")
   {
      this.fromState = "up";
      this.toState ="normal";
   }

   this.isUp = false;
   this.show();
 }

然后将 isUp 设置回 false 以播放下一个动画。我还在下面包含了我的动画代码。

 trigger('scrollAnimation', [
  state('up', style({transform: 'translateY(-20%)',opacity:0, offset: 0})),
  state('normal', style({transform: 'translateY(20%)',opacity:1, offset: 0})),
  state('down', style({transform: 'translateY(60%)',opacity:0, offset: 0})),

  transition('normal => up', [
    animate('0.5s ease')
  ]),
  transition('normal => down', [
    animate('0.5s ease')
  ]),
  transition('up => normal', [
    animate('2s ease', keyframes([
      style({ transform: 'translateY(80%)',opacity:0, offset: 0.05 }),
      style({ transform: 'translateY(20%)',opacity:1, offset: 0.55 }),

    ])),
  ]),
  transition('down => normal', [
    animate('2s ease', keyframes([
      style({ transform: 'translateY(-20%)',opacity:0, offset: 0.05}),
      style({ transform: 'translateY(20%)',opacity:1, offset: 0.55 }),
    ]))
  ]),
]),

我希望这会有所帮助。

【讨论】：