文章/答案/技术大牛

发布

社区首页 >问答首页 >Angular - ng-Template打开/关闭状态的动画

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

Stack Overflow用户

提问于 2020-02-27 21:20:29

回答 1查看 496关注 0票数 1

我想在我的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];
  }

}

html

css

angular

typescript

回答 1

Stack Overflow用户

发布于 2020-02-27 22:12:11

根据你的评论:我是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容器而不是div，因为ng容器不会在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的更改设置动画。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60434192

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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