Angular 2向上和向下滑动动画
我最近构建了以下Angular 2 Read More组件.该组件的作用是使用“Read more”和“Read less”链接折叠和扩展长文本块.不是基于字符数,而是基于指定的最大高度.
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> 该组件运作良好.现在我需要向组件添加一些向上/向下滑动动画,以便在单击“阅读更多”链接时向下滑动内容,单击“阅读更少”时,内容将向上滑动到指定的最大高度. 任何人都可以指导如何实现这一目标?
来自Angular官方文档:https://angular.io/guide/animations#automatic-property-calculation (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |