Angular5自定义指令实现点击元素，兄弟元素展开和折叠的transition效果

标签：cli   直接   elements   sub   The   hid   展开   高度   cto   

需求：点击某个标签，紧随其后的ul列表展开或者关闭并有transition效果。

难点：ul 里面的 li 数量未知，ul 高度不定，需要获取 li 数量乘以 li 高度然后计算出 ul 高度。

直接上代码：

// 属性型指令，在dom中添加后，其紧随其后的ul兄弟元素会有动画的展开和折叠效果，需要给其后的ul兄弟元素添加overflow:hidden;height:0;transition:height:0.5s;
//directive.ts
import { Directive, ElementRef, HostListener} from ‘@angular/core‘;
@Directive({
  selector: ‘[appSidebarTransition]‘
})
export class SidebarTransitionDirective {

  constructor(private el: ElementRef) {}
  @HostListener(‘click‘) onClick() {
    this.toggleList();
  }
  private toggleList() {
    const ulElement = this.el.nativeElement.nextElementSibling;
    const liElementHeight = 46;
    if (ulElement.style.height == 0 || ulElement.style.height === ‘0px‘) {
      ulElement.style.height = liElementHeight * ulElement.children.length + ‘px‘;
    } else {
      ulElement.style.height = 0;
    }
  }
}
//用法，注入component所属的module中，然后直接在ul标签前面的标签中添加appSidebarTransition属性即可

<a appSidebarTransition (click)="data.activated = !data.activated;">
  <i><mat-icon>{{data.icon}}</mat-icon></i>
  {{data.name}}
  <i class="back-icon" *ngIf="data.children && (data.children.length>0)">
    <mat-icon *ngIf="!data.activated">add</mat-icon>
    <mat-icon *ngIf="data.activated">remove</mat-icon>
  </i>
</a>
  <ul class="submenu">
    <li *ngFor="let item of data.children">
      <a>{{item.name}}</a>
    </li>
  </ul>

Angular5自定义指令实现点击元素，兄弟元素展开和折叠的transition效果

标签：cli   直接   elements   sub   The   hid   展开   高度   cto   

原文地址：https://www.cnblogs.com/xianxiaobo/p/9177137.html