动态改变高度的角度动画

问题描述

我已经成功地获得了一个面板，可以在进入和离开 DOM 时对展开和关闭进行动画处理.问题是我现在在显示详细信息之前在面板内有一个忙指示器，并且动画仅在打开忙指示器时发生，并在显示详细内容时捕捉.

I've successfully gotten a panel to animate expanding and closing when entering and leaving the DOM. The problem is I now have a busy indicator inside the panel prior to showing details, and the animation only occurs for opening the busy indicator, and snaps when the detail content is shown.

如何让 Angular 动画在任何高度变化时进行动画处理?

How can I get the Angular animation to animate on any height change?

我这里有一个例子:https://stackblitz.com/edit/angular-animation-for-dynamically-changed-height?embed=1&file=src/app/app.component.ts

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'
        }))
    ])
])

推荐答案

我编写了一个组件，可以在内容更改时平滑地为投影内容的高度设置动画.它是这样使用的:

I've written a component that smoothly animates the height of projected content if that content changes.It's used like this:

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

这是一个堆栈闪电战: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;

  @HostBinding('@grow') grow: any;

  constructor(private element: ElementRef) {}

  ngOnChanges(){
    this.startHeight = this.element.nativeElement.clientHeight;

    this.grow = {
      value: this.trigger,
      params: {startHeight: this.startHeight}
    };
  }
}

这篇关于动态改变高度的角度动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！