Angular Animations动态设置translateY值：问答切换动画实现

当然可以实现！在Angular里要根据元素高度动态调整动画的translateY值，有几种实用的方案，我来给你一步步拆解：

方法一：利用动画参数（Params）传递动态高度 #

这是Angular动画推荐的方式，通过给动画状态绑定参数，把元素高度作为参数传入动画配置。

1. 修改动画配置，添加参数支持 #

首先在你的动画触发器里，把translateY的值改成参数占位符，并设置默认参数：

animations: [
  trigger('slide', [
    state('up', style({
      opacity: 1,
      transform: 'translateY({{ translateYValue }})',
    }), { params: { translateYValue: '0px' } }), // 设置默认值
    state('down', style({
      opacity: 0,
      transform: 'translateY({{ translateYValue }})',
    }), { params: { translateYValue: '0px' } }),
    transition('up => down', [animate('0.5s ease-in')]),
    transition('down => up', [animate('0.5s ease-in')]),
  ]),
],

2. 获取每个问题容器的高度 #

用ViewChildren获取所有问题容器的DOM元素，在视图初始化后计算每个元素的高度：

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-question-component',
  templateUrl: './question-component.html',
  animations: [/* 上面的动画配置 */]
})
export class QuestionComponent implements AfterViewInit {
  questions = [/* 你的JSON问题数组 */];
  currentIndex = 0; // 控制当前显示的问题
  isUp = true;
  @ViewChildren('questionBox') questionBoxes!: QueryList<ElementRef>;
  // 存储每个问题容器对应的translateY值
  slideValues: { [index: number]: string } = {};

  ngAfterViewInit(): void {
    // 初始化每个问题的高度对应的translateY值
    this.questionBoxes.forEach((box, index) => {
      const height = box.nativeElement.offsetHeight;
      // 根据动画方向调整正负：比如向上滑出用`-${height}px`，向下滑出用`${height}px`
      this.slideValues[index] = `-${height}px`;
    });
  }

  // 切换问题的方法
  switchQuestion(): void {
    this.isUp = !this.isUp;
    // 循环切换到下一个问题
    this.currentIndex = (this.currentIndex + 1) % this.questions.length;
  }
}

3. 在模板中绑定动画参数 #

修改HTML模板，给动画指令传递状态和对应的参数，同时控制只显示当前问题：

<div 
  #questionBox
  *ngFor="let question of questions; let i = index"
  [@slide]="{ value: isUp ? 'up' : 'down', params: { translateYValue: slideValues[i] } }"
  [style.display]="i === currentIndex ? 'block' : 'none'"
>
  <h2>{{ question.question }}</h2>
  <!-- 问题的其他内容 -->
</div>

方法二：实时计算高度（适合动态内容场景） #

如果你的问题内容是动态加载的（比如异步获取数据），或者高度会随交互变化（比如展开答案），可以在切换问题时实时计算高度：

修改switchQuestion方法，在切换前获取当前元素的高度：

switchQuestion(): void {
  // 获取当前显示的问题容器
  const currentBox = this.questionBoxes.get(this.currentIndex);
  if (currentBox) {
    const height = currentBox.nativeElement.offsetHeight;
    this.slideValues[this.currentIndex] = `-${height}px`;
  }
  this.isUp = !this.isUp;
  this.currentIndex = (this.currentIndex + 1) % this.questions.length;
}

注意事项 #

• 如果内容是异步加载的，要在数据加载完成后再调用高度计算逻辑（比如在subscribe的回调里）。
• 若元素高度会动态变化（比如窗口resize、内容展开），可以监听window:resize事件或者用MutationObserver来更新slideValues。

这样就能完美实现基于元素高度动态设置translateY的动画效果啦～

内容的提问来源于stack exchange，提问作者nontechguy