用于动态改变高度的角动画

Question

进入和离开DOM时,我已成功获得一个面板来动画扩展和关闭.问题是我现在在显示详细信息之前在面板内有一个忙碌指示器,并且仅在打开忙指示符时发生动画,并且在显示详细内容时捕捉动画.

如何让Angular动画在任何高度变化时动画？

我在这里有一个例子:https://plnkr.co/edit/Bs0rwp4ElidR75zN3ulR

trigger('expandCollapseDetails', [
    state('void', style({
        'height': '0px',
        overflow: 'hidden'
    })),
    //element being added into DOM.
    transition(':enter', [
        animate('500ms ease-in-out', style({
            'height': '*',
            overflow: 'hidden'
        }))
    ]),
    //element being removed from DOM.
    transition(':leave', [
        animate('500ms ease-in-out', style({
            'height': '0px',
            overflow: 'hidden'
        }))
    ])
])

Answer 1

我编写了一个组件,如果内容发生变化,可以平滑地动画投影内容的高度.它的使用方式如下:

<smooth-height [trigger]="content">
  {{content}}
</smooth-height>

这是一个stackblitz:https://stackblitz.com/edit/angular4-kugxw7

这是组件:

import {ElementRef, HostBinding, Component, Input, OnChanges} from '@angular/core';
import {animate, style, transition, trigger} from "@angular/animations";

@Component({
  selector: 'smooth-height',
  template: `
    <ng-content></ng-content>
  `,
  styles: [`
    :host {
      display: block;
      overflow: hidden;
    }
  `],
  animations: [
    trigger('grow', [
      transition('void <=> *', []),
      transition('* <=> *', [
        style({height: '{{startHeight}}px', opacity: 0}),
        animate('.5s ease'),
      ], {params: {startHeight: 0}})
    ])
  ]
})
export class SmoothHeightComponent implements OnChanges {
  @Input()
  trigger: any;

  startHeight: number;

  constructor(private element: ElementRef) {}  

  @HostBinding('@grow') get grow() {
    return {value: this.trigger, params: {startHeight: this.startHeight}};
  }

  setStartHeight(){
    this.startHeight = this.element.nativeElement.clientHeight;
  }

  ngOnChanges(){
    this.setStartHeight();
  }
}

Answer 2

我根据@MartinCremer的答案做了一个指令。我认为使用指令更有意义，因为这样做，您还应该将动画添加到父组件中（这是添加动画的标准方法）。

因此，在我的animations.ts文件中。我添加了动画：

export const smoothHeight = trigger('grow', [
  transition('void <=> *', []),
  transition('* <=> *', [style({ height: '{{startHeight}}px', opacity: 0 }), animate('.5s ease')], {
    params: { startHeight: 0 }
  })
]);

然后应将此动画添加到父组件（要在其中使用动画的组件）：

import { smoothHeight } from '@app/animations';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  animations: [smoothHeight]
})

这是与@MartinCremer的组件非常接近的指令：

import { Directive, OnChanges, Input, HostBinding, ElementRef } from '@angular/core';

@Directive({
  selector: '[smoothHeight]',
  host: { '[style.display]': '"block"', '[style.overflow]': '"hidden"' }
})
export class SmoothHeightAnimDirective implements OnChanges {
  @Input()
  smoothHeight;
  pulse: boolean;
  startHeight: number;

  constructor(private element: ElementRef) {}

  @HostBinding('@grow')
  get grow() {
    return { value: this.pulse, params: { startHeight: this.startHeight } };
  }

  setStartHeight() {
    this.startHeight = this.element.nativeElement.clientHeight;
  }

  ngOnChanges(changes) {
    this.setStartHeight();
    this.pulse = !this.pulse;
  }
}

最后在里面parent.component.html使用指令：

<div [smoothHeight]="yourAnimationIndicator">
  // any html content goes here
</div>

只需替换yourAnimationIndicator为动画在其值更改时应触发的变量。