Question

我有一个带有动态定义的svg图像的组件，我试图制作动画。

<div class="special-container">
  <div class="alert-panel">
    <ion-icon class="close" style="float:right;cursor:pointer" color="primary" name="close" (click)="dismiss()"></ion-icon>
    <div class="image-container" #svg_image>
      <div class="image" [style.background]="urgent ? '#f53d3d' : 'dodgerblue'" [innerHtml]="image | keepHtml">
          <!-- SVG loads here -->
      </div>
    </div>
    <ion-grid>
      <ion-row>
        <ion-col col-8 push-2><h3 class="title no-margin">{{ title }}</h3></ion-col> 
        <ion-col col-8 push-2> <p class="subtitle subtle no-margin">{{ subtitle }}</p></ion-col> 
      </ion-row> 
    </ion-grid> 

    <div padding *ngIf="type == 'confirm'">
      <ion-grid>
        <ion-row>
          <ion-col><button (click)="dismiss('no')" ion-button full round color="danger">No</button></ion-col>
          <ion-col><button (click)="dismiss('yes')" ion-button full round color="primary">Yes</button></ion-col>
        </ion-row> 
      </ion-grid> 
    </div>
  </div>
</div>

我正在尝试添加类名＆＃39;动画＆＃39;和＆＃t; tada＆＃39;但它根本没有工作。

@ViewChild('svg_image') svg;

// Correctly logs the svg element
console.log(this.svg.nativeElement.childNodes[1].childNodes[1])
setTimeout(() => {
  this.svg.nativeElement.childNodes[1].childNodes[1].classList += ' animated'
  this.svg.nativeElement.childNodes[1].childNodes[1].classList += ` tada`
}, 1000)

我无法将#svg_image标记放在实际目标上，因为它未在渲染时定义并会抛出错误。所以我选择了childNodes路线。

代码有什么问题？

Answer 1

要将课程添加到classList，您需要致电classList.add('tada', 'animated')

请参阅the doc here

Answer 2

注入Renderer的{{1}}服务后，您可以将这两个类添加到元素中：

@angular/core

渲染后将类添加到元素

2 个答案: