Angular 2上下滑动动画

本文介绍了Angular 2上下滑动动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我最近构建了以下Angular 2 Read More组件.该组件的作用是使用阅读更多"和阅读更少"链接折叠并扩展较长的文本块.不是基于字符数，而是基于指定的最大高度.

I recently built the following Angular 2 Read More component. What this component does is collapse and expand long blocks of text with "Read more" and "Read Less" links. Not on the basis of the character count but on the basis of the specified max height.

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>

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

The component works well. Now I need to add some slide up/down animation to the component so that when Read More link is clicked the contents slide down and when Read less is clicked, the contents slide up to specified max height.

任何人都可以指导如何实现吗?

Can anyone please guide how to achieve this?

推荐答案

我的: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

Unfortunately I had to incorporate this fix also (for slideOut):https://github.com/angular/angular/issues/15798

这篇关于Angular 2上下滑动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

slideout