动态改变高度的角度动画 [英] Angular Animation For Dynamically Changing Height

问题描述

我成功地获得了一个面板，用于在进入和离开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- fordynamically-changing-changing-height？embed = 1& file = src / app / app.component.ts

I have an example here: https://stackblitz.com/edit/angular-animation-for-dynamically-changing-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

Here's a 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();
  }
}

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