使用变量 Angular 4 制作动画

Posted 2023-03-06

【中文标题】使用变量 Angular 4 制作动画

【英文标题】：Animating with variables Angular 4

【发布时间】：2018-04-17 18:47:36

【问题描述】：

我正在使用@angular/animations: 4.4.6 尝试为将显示大量文本的组件制作展开/折叠动画。默认情况下，它会显示一定数量的文本，但不同的父组件可以定义不同的折叠高度。 据我所知，我做的一切都是对的。但是animations 装饰器忽略了输入，直接使用默认值。

import  AUTO_STYLE, trigger, state, style, transition, animate, keyframes  from '@angular/animations';

@Component(
  selector: 'app-long-text',
  templateUrl: './long-text.component.html',
  styleUrls: ['./long-text.component.scss'],
  animations: [
    trigger('expandCollapse',[
      state('collapsed, void', style(
        height: 'min_height',
      ), params: min_height: '4.125em'),
      state('expanded', style(
        height: AUTO_STYLE
      )),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
)
export class LongTextComponent implements OnInit 

  @Input() minHeight: string;
  @Input() textBody: string;
  longTextState: string = 'collapsed';
  constructor() 

   

  ngOnInit() 
  

  expandText()
    this.longTextState = this.longTextState === 'expanded' ? 'collapsed' : 'expanded';
  

还有html：<div [@expandCollapse]="value: longTextState, min_height: minHeight" [innerHtml]="textBody" >

为了完整起见编辑：带有动画的父 <div>（上面提到）具有 (click)="expandTex()" 属性。

【问题讨论】：

_据我所知，我做的一切都是对的。 _ 能否请您在 stackblitz 中重现此问题

@RahulSingh:angular-mh66ap.stackblitz.io 可以看到动画可以正常工作，但它会回退到折叠高度的默认值，而不是它在@Input() 中得到的值。

【参考方案1】：

您需要将模板中的参数值包装在一个对象中 “参数”

   @Component(
  selector: 'hello',
  template:  `<div (click)="expandText()" style="cursor: pointer">
                <div [@expandCollapse]="value: longTextState, params:min_height: minHeight" [innerHtml]="textBody" style="overflow: hidden;">
                </div> // you need to wrap it in params the input values
                <h1>longTextState</h1>
                <h1>this.minHeight: minHeight</h1>
              </div>`,
  styles: [`h1  font-family: Lato; `],
  animations: [
    trigger('expandCollapse',[
      state('collapsed', style(
        height: 'min_height',
      ), params: min_height: '3em'),
      state('expanded', style(
        height: AUTO_STYLE
      )),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
)

工作LINK