Góc 2 Trượt lên và xuống Hoạt ảnh

Question

Gần đây tôi đã xây dựng phần Góc 2 sau Đọc thêm thành phần. Thành phần này làm gì là thu gọn và mở rộng các khối văn bản dài với các liên kết "Đọc thêm" và "Đọc ít" hơn. Không dựa trên số lượng ký tự mà dựa trên chiều cao tối đa được chỉ định.

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

Và sử dụng như:

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

Các thành phần hoạt động tốt. Bây giờ tôi cần thêm một số slide up/down animation cho thành phần để khi liên kết Read More được nhấp vào nội dung trượt xuống và khi Read less được nhấp, nội dung trượt lên đến chiều cao tối đa được chỉ định.

Mọi người có thể vui lòng hướng dẫn cách đạt được điều này không?

Answer 1

Câu trả lời của Threeve là chính xác - vấn đề duy nhất là quá trình chuyển đổi CSS sẽ không hoạt động với 'tự động'. Vì vậy, bạn cần phải nắm bắt chiều cao tự động trong hàm ngAfterViewInit và lưu nó dưới dạng một chuỗi. Cũng lưu ý việc sử dụng hàm setTimeout để ngăn chặn 'lỗi vi phạm luồng dữ liệu một chiều' có thể xảy ra.

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

} 

Answer 2

tài sản tự động tính toán

Animation với chiều cao tự động tính toán

Đôi khi bạn không biết giá trị của một thuộc tính chiều cho đến khi thời gian chạy. Ví dụ: các phần tử thường có chiều rộng và chiều cao phụ thuộc vào nội dung của chúng và kích thước màn hình. Các thuộc tính này là thường khó để hoạt ảnh với CSS.

Trong những trường hợp này, bạn có thể sử dụng giá trị thuộc tính * đặc biệt để giá trị của thuộc tính được tính theo thời gian chạy và sau đó được cắm vào hoạt ảnh .

Trong ví dụ này, các hình ảnh động nghỉ mất bất cứ điều gì chiều cao các yếu tố có trước khi nó rời và sinh động từ chiều cao đến zero:

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

từ góc tài liệu chính thức: https://angular.io/guide/animations#automatic-property-calculation