Javascript 用Aurelia控制SVG动画

我对用Aurelia控制的动画有问题

app.html

现在，单击按钮时动画开始。即：当我点击“打开”按钮，打开动画开始，然后切换到“关闭”，关闭动画是在中间。动画完成后，我无法再次运行它

我想在这里做的是在每次单击连接到它的按钮时启动适当的动画（打开或关闭）

我不想在这里使用
SVG.beginElement（）

谢谢
您遇到的问题是因为SVG动画通过

states = ["opening", "closing"];
duration:string = "10s";
rotationPoint: string = " 18.9 32.05";
rightRotation = -95 + this.rotationPoint;
leftRotation= 130 + this.rotationPoint;
zero = 0 + this.rotationPoint;
state:string;
fromCW:string;
fromCCW:string;
toCW:string; 
toCCW:string;

domeAnimate(): void{
  switch (this.state){
    case "opening":
      this.fromCW = this.fromCCW = this.zero;
      this.toCW= this.leftRotation;
      this.toCCW = this.rightRotation;
      break;
    case "closing":
      this.fromCW = this.leftRotation;
      this.fromCCW = this.rightRotation;
      this.toCW = this.toCCW = this.zero;
      break;
  }
}
changeState(id):void {
  this.state = id.state;
  this.domeAnimate();
}