javascript - 渲染后向元素添加类

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>

我正在尝试添加类名“animated”和“tada”，但它根本不起作用。

@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