要解决Angular动画只在第一次点击时起作用的问题，可以使用一个标志位来判断是否是第一次点击。

以下是一个示例代码，演示了如何使用标志位来控制动画的触发：

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  animations: [
    trigger('fade', [
      state('visible', style({
        opacity: 1
      })),
      state('hidden', style({
        opacity: 0
      })),
      transition('visible => hidden', animate('500ms')),
      transition('hidden => visible', animate('500ms'))
    ])
  ]
})
export class ExampleComponent {
  isClicked: boolean = false;
  fadeState: string = 'hidden';

  toggleAnimation() {
    if (!this.isClicked) {
      this.isClicked = true;
      this.fadeState = 'visible';
    } else {
      this.isClicked = false;
      this.fadeState = 'hidden';
    }
  }
}

在上面的代码中，我们使用了isClicked变量来表示是否已经点击过。在toggleAnimation方法中，我们根据isClicked的值来决定是显示还是隐藏动画。当第一次点击时，将isClicked设置为true，并将fadeState设置为visible，从而触发动画。当再次点击时，将isClicked设置为false，并将fadeState设置为hidden，从而隐藏动画。

在模板文件中，使用[@fade]来触发动画效果：

Toggle Animation


  

通过以上代码，可以实现每次点击按钮时都触发动画效果，而不仅仅是第一次点击。