Winkel-Animation Für Dynamisch Veränderliche Höhe

Habe ich erfolgreich bekommen ein Gremium zu animieren, erweitern und schließen beim betreten und verlassen der DOM. Das problem ist ich habe jetzt ein busy-Indikator in der Systemsteuerung vor und zeigt die details und die animation tritt nur auf, für die Eröffnung die Funktionsanzeige, und schnappt, wenn der detail-Inhalt angezeigt.

Wie bekomme ich den Winkel für die animation auf jeder beliebigen Höhe ändern?

Habe ich ein Beispiel hier: 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'
        }))
    ])
])

InformationsquelleAutor Chris Moore | 2017-11-15

angular animation

Ich geschrieben habe, eine Komponente, die sanft belebt die Höhe der projizierten Inhalt, wenn sich der Inhalt ändert.
Man benutzt es wie folgt:

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

Hier ein stackblitz: https://stackblitz.com/edit/angular4-kugxw7

Dies ist die Komponente:

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();
  }
}

Dein Beispiel ist ein wenig anders als meine (meine dynamische Inhalte nicht einfach nur ein string), aber ich denke, ich angepasst, deins genug, um durchzukommen. Danke!
Ihr willkommen. In Bezug auf Ihre plnkr, ich denke, Sie können es verwenden, wie <glatt-Höhe [Kennzeichen]="areDetailsVisible">...
Nette Idee. indicator ist eigentlich der Auslöser für die animation.
Danke, geändert 'Kennzeichen' zum 'auslösen', es ist ein besseres Wort, in der Tat!

InformationsquelleAutor Martin Cremer

Machte ich eine Richtlinie basierend auf dem @MartinCremer Antwort. Ich denke, mit einer Richtlinie mehr Sinn macht, da durch Sie das tun, sollten Sie auch hinzufügen, die animation zu Ihrer übergeordneten Komponente (und es ist in der Nähe der standard-Weg von hinzufügen von Animationen).

So, in meinem animations.ts - Datei. Ich habe die animation:

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

dann sollten Sie sich diese animation an Ihre übergeordnete Komponente (die Komponente, die Sie verwenden möchten, die animation innen):

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

Und hier ist die Richtlinie, die ganz in der Nähe der Komponente von @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;
  }
}

Schließlich in parent.component.html mit der Direktive:

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

Ersetzen Sie einfach yourAnimationIndicator mit der variable, die die animation auslösen auf änderung seines Wertes.

InformationsquelleAutor Vahid

Kann man etwas erreichen ähnlich wie mit einem bisschen css-und js:

Lösung:

Komponente.ts -

import { Component, OnChanges, ViewChild, Input } from '@angular/core';

@Component({
  selector: 'app-exandable',
  templateUrl: './exandable.component.html',
  styleUrls: ['./exandable.component.css']
})
export class ExandableComponent implements OnChanges {

  @Input()
  src;

  @ViewChild('expandable')
  expandable;

  ngOnChanges() {
    this.updateHeight();
  }

  updateHeight(delay = 0) {
    const el = this.expandable.nativeElement;

    setTimeout(() => {

      const prevHeight = el.style.height;
      el.style.height = 'auto';
      const newHeight = el.scrollHeight + 'px';
      el.style.height = prevHeight;

      setTimeout(() => {
        el.style.height = newHeight;
      }, 50);
    }, delay);
  }
}

css

.expandable {
  transition: height 0.2s ease-in-out;
  overflow: auto;
}

Lösung:

Komponente.ts -

css

Code: