Angular 2上下滑动动画

Question

我最近构建了以下 Angular 2 Read More 组件。该组件的作用是通过“阅读更多”和“阅读更少”链接折叠和展开长文本 block 。不是基于字符数，而是基于指定的最大高度。

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

像这样使用:

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

该组件运行良好。现在我需要向组件添加一些向上/向下滑动动画，以便在单击“阅读更多”链接时内容会向下滑动，而在单击“阅读较少”时内容会向上滑动到指定的最大高度。

谁能指导如何实现这一点？

Answer 1

我使用 :enter、:leave 和 *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'}))
                ])

            ])
        ])
    ]
})
...

模板:

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

不幸的是，我还必须合并此修复程序(对于 slideOut): https://github.com/angular/angular/issues/15798