时间戳

首页 > 解决方案 > Angular - 打开/关闭状态的 ng-Template 动画

html - Angular - 打开/关闭状态的 ng-Template 动画

问题描述

我想在我的状态发生ng-template变化时创建动画，但我对这个组件一无所知......

https://ng-bootstrap.github.io/

这是我的report.component.html

<ngb-accordion (click)="arrowRotation(i)" (panelChange)="isOpen($event) "
                   *ngFor="let signature of report.xmlReport.signatures; let i=index">
      <ngb-panel>
        <ng-template ngbPanelTitle>
          <div class="d-flex justify-content-between">
            <p class="v-align">signature {{i + 1}} / {{size}}
              <i *ngIf="signature.errors.length == 0" class="icon-status-ok fa fa-check-circle"></i>
              <i *ngIf="signature.errors.length != 0" class="icon-status-ko fa fa-times"></i>
            </p>
            <fa-icon [id]="arrowID + i" icon="arrow-right"></fa-icon>
          </div>
        </ng-template>
        <ng-template ngbPanelContent>
          <app-signature [signature]="signature">
          </app-signature>
        </ng-template>
      </ngb-panel>
    </ngb-accordion>

这是my report.component.ts

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.css']
})
export class ReportComponent implements OnInit {

  arrowID: string;
  isShow = true;
  openById = {};

  constructor() {
  }

  ngOnInit() {
    this.arrowID = 'arrow_' + this.reportType + '_';
  }

  arrowRotation(id) {
    const icon = document.getElementById(this.arrowID + id);
    console.log('arrowID = ' + this.arrowID + id);

    if (this.isShow === true) {
      icon.style.transition = 'all 0.25s linear';
      icon.style.transform = 'rotate(90deg)';

    } else {
      icon.style.transition = 'all 0.25s linear';
      icon.style.transform = 'rotate(0deg)';
    }
  }

  /**
   * return state of accordion, if accordion is open then it return true
   * @param event get status of accordion
   */
  isOpen(event) {
    this.openById[event.panelId] = event.nextState;
    this.isShow = this.openById[event.panelId];
  }

}

标签： htmlcssangulartypescript

解决方案

根据您的评论：我是 Angular 的初学者，您能向我解释一下如何实现吗？

我做了一个简单的例子，使用基本的 CSS 动画来完成它的工作。

Stackblitz：https ://stackblitz.com/edit/angular-xedgma?file=src%2Fapp%2Fapp.component.css

Sice 我不知道您使用的是哪种数据，我制作了一个简单的文本列表，其中包含一个自定义属性，该属性将处理state：

list = [
    {
    name: "test name 1",
    active: false,
    },
    {
    name: "test name 2",
    active: false,
    },
    {
    name: "test name 3",
    active: false,
    },
    {
    name: "test name 4",
    active: false,
    },
  ];

通过 html 进行的迭代只是每行都有ngFor一个ngClass：

<ng-container *ngFor="let data of list; let i = index">
  <div class="single-item" [ngClass]="[data.active ? 'single-item-active':'single-item-not-active']" (click)="toggleActiveClass(i)">
    {{data.name}}
  </div>
</ng-container>

我使用了 ng-container 而不是 div，因为 ng-container 不会在 DOM 中呈现。

CSS部分：

.single-item {
  height: 30px;
  line-height: 30px;
  background-color: grey;
  margin-bottom: 10px;
  box-sizing: border-box;
  width: 200px;
  transition: all 0.2s ease-in;
}

.single-item::after {
  content: ' >>> click me';
  cursor: pointer;
}

.single-item-not-active {
  padding-left: 0px;
}

.single-item-active {
  padding-left: 10px;
}

最后，改变状态的函数，需要迭代行的索引：

public toggleActiveClass(index: number): void {
    this.list[index].active = !this.list[index].active;
  }

请记住一件事：

您不能为 CSS 中的每个属性设置动画。例如，您不能为text-decoration.

推荐阅读