Winkel-2 Slide Up und Down Animation

Ich habe vor kurzem gebaut, die folgenden Eckig 2 Mehr Lesen Komponente. Was diese Komponente tut, ist das reduzieren und erweitern Sie lange Textblöcke mit "Lesen Sie mehr" und "Weniger Lesen" - links. Nicht auf der basis von die Anzahl der Zeichen, jedoch auf der Grundlage der angegebenen max Höhe.

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';

@Component({
    selector: 'read-more',
    template: `
        <div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
        </div>
            <a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
    `,
    styles: [`
        div.collapsed {
            overflow: hidden;
        }
    `]
})
export class ReadMoreComponent implements AfterViewInit {

    //the text that need to be put in the container
    @Input() text: string;

    //maximum height of the container
    @Input() maxHeight: number = 100;

    //set these to false to get the height of the expended container 
    public isCollapsed: boolean = false;
    public isCollapsable: boolean = false;

    constructor(private elementRef: ElementRef) {
    }

    ngAfterViewInit() {
        let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;
       //collapsable only if the contents make container exceed the max height
        if (currentHeight > this.maxHeight) {
            this.isCollapsed = true;
            this.isCollapsable = true;
        }
    }
}

Und verwendet wie:

<read-more [text]="details" [maxHeight]="250"></read-more>

Die Komponente funktioniert gut. Jetzt muss ich hinzufügen, dass einige slide up/down-animation, um die Komponente so, dass wenn Mehr Lesen link geklickt wird, den Inhalt nach unten schieben und beim Lesen weniger geklickt wird, den Inhalt-dia bis zur angegebenen max Höhe.

Kann mir jemand bitte eine Anleitung wie dies zu erreichen?

  • Siehe meine Antwort hier. Das Beispiel ist so ziemlich genau das, was Sie zu tun versuchen.
  • Danke threeve, habe ich eigentlich versucht, indem die unten Stil info zu meinem obigen Komponente, aber das scheint nicht zu funktionieren. styles: [` div.zusammengebrochen { overflow: hidden; }, div { transition: Höhe 500ms ease; }`]
  • Wenn es für Sie arbeitet, können Sie gültige meine Lösung bitte?
  • Die Lösung scheint zu funktionieren nur in einer Richtung - oben schieben.
InformationsquelleAutor Naveed Ahmed | 2016-06-15
  1. 14

    Automatische Eigenschaft Berechnung

    Animation mit automatisierter Berechnung der Höhe

    Manchmal wissen Sie nicht, den Wert einer dimensionalen Stil-Eigenschaft
    erst zur Laufzeit. Zum Beispiel, Elemente haben oft Höhen und breiten
    verlassen Sie sich auf Ihre Inhalte und die Display-Größe. Diese Eigenschaften sind
    oft schwierig zu animieren mit CSS.

    In diesen Fällen können Sie eine spezielle * Eigenschaft-Wert, so dass die
    Wert der Immobilie berechnet zur Laufzeit und steckt dann in der
    animation.

    In diesem Beispiel, kann der Urlaub animation braucht, unabhängig von der Höhe des Elements
    hat, bevor es die Blätter und belebt aus, dass die Höhe auf null :

    animations: [
  trigger('shrinkOut', [
    state('in', style({height: '*'})),
    transition('* => void', [
      style({height: '*'}),
      animate(250, style({height: 0}))
    ])
  ])
]

    Kantige offizielle Dokumentation : https://angular.io/guide/animations#automatic-property-calculation

    • dies versucht aber der text innerhalb des Elements wird nicht animiert, aber wenn ich mir einige hintergrund-Farbe klappte es irgendwie für die container -, Pflege zu sagen, warum?
    • Funktioniert diese Lösung oben schieben (zum ausblenden / hide) nur??? Und nicht nach unten (erweitern / einblenden) ?
    InformationsquelleAutor Julien
  2. 14

    Meine Lösung mit :enter, :leave und *ngIf:

    @Component({
    selector: 'accordion',
    templateUrl: './accordion.component.html',
    animations: [
        trigger('slideInOut', [
            state('in', style({height: '*', opacity: 0})),
            transition(':leave', [
                style({height: '*', opacity: 1}),

                group([
                    animate(300, style({height: 0})),
                    animate('200ms ease-in-out', style({'opacity': '0'}))
                ])

            ]),
            transition(':enter', [
                style({height: '0', opacity: 0}),

                group([
                    animate(300, style({height: '*'})),
                    animate('400ms ease-in-out', style({'opacity': '1'}))
                ])

            ])
        ])
    ]
})
...

    Vorlage:

    <div *ngIf="shown" [@slideInOut] >
    //...content
</div>

    Leider musste ich übernehmen dieses Update ist auch (für slideOut):
    https://github.com/angular/angular/issues/15798

    InformationsquelleAutor Felix
  3. 2

    Threeve s Antwort ist richtig - das problem ist nur, dass die CSS-transition funktioniert nicht mit 'auto'. So müssen Sie erfassen das auto in Höhe der ngAfterViewInit-Funktion und speichern Sie es als string. Beachten Sie auch die Verwendung der setTimeout-Funktion zu stoppen, die "einseitig-data-flow-Verletzung-Fehler' auftreten können.

    import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';

@Component({
selector: 'read-more',
template: `
    <div [style.height]="isCollapsed ? maxHeight+'px' : autoHeight">
        <ng-content></ng-content>
    </div> 

    <span *ngIf="isCollapsable" class="btn-link cpointer" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}} ...</span>

    `,
styles: [` div { overflow-y: hidden; 
          -moz-transition: height .5s;
          -ms-transition: height .5s;
          -o-transition: height .5s;
          -webkit-transition: height .5s;
          transition: height .5s; ease;}
         .cpointer {cursor:pointer; }
        `]
})
export class ReadMoreComponent implements AfterViewInit {

@Input()
maxHeight: number = 40; //two lines

////set these to false to get the height of the expended container 
isCollapsed: boolean = false;
isCollapsable: boolean = false;
autoHeight: string= "auto";

constructor(private elementRef: ElementRef) {}

ngAfterViewInit() {
    //Inportant !!
    //wait a tick to avoid one-time devMode
    //unidirectional-data-flow-violation error
    setTimeout(_ => {
            let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;

            this.autoHeight = currentHeight + "px";
            //collapsable only if the contents make container exceed the max height
            if (currentHeight >= this.maxHeight) {
                this.isCollapsed = true;
                this.isCollapsable = true;
            }
        }
    );
}

}
    InformationsquelleAutor Ron Brill
Schreibe einen Kommentar