Angular+gsap3 动画在点击时不工作

Question

app.component.html


<div #animate class="main">

    <div id="go" (click)="click()" class="box1"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

app.component.ts

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { gsap, Back, Bounce, Elastic } from 'gsap'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


  ngOnInit() {
    this.animation();
    
  }


  click(): void {
    gsap.to(".box1", 3, { x: 200,background:"red", ease: Elastic.easeOut, paused: true })
    
  }

  animation() {
    gsap.to(".main .box", 3, { x: 200, stagger: 0.3, ease: Bounce.easeOut })
  }

}

单击 box1 时动画不起作用，其他动画起作用 fine.Even 我检查了控制台，click() 起作用了，它显示了动画，但效果没有发生

Answer 1

我删除了

paused: true

并且当点击动画开始工作时，感谢所有尝试过上述操作的人

    gsap.to(".box1", 3, { x: 200,background:"red", ease: Elastic.easeOut }) }

此代码有效...

Angular+gsap3 动画在点击时不工作

Angular+gsap3 animation not working when clicked upon

angular

animation

gsap