要在元素上使用Angular动画，您可以按照以下步骤进行操作：

1. 首先，确保已经安装了Angular动画模块。您可以使用以下命令来安装它：

npm install @angular/animations --save

2. 然后，在您的模块文件（通常是app.module.ts）中导入BrowserAnimationsModule：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [BrowserAnimationsModule],
  // other module configurations...
})
export class AppModule { }

3. 在您的组件文件中，导入trigger，state，style和transition等动画相关的函数和装饰器：

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

4. 在您的组件类中定义动画：

@Component({
  selector: 'app-your-component',
  templateUrl: 'your-component.html',
  styleUrls: ['your-component.css'],
  animations: [
    trigger('rowAnimation', [
      state('fadeIn', style({ opacity: 1 })),
      transition('void => *', [
        style({ opacity: 0 }),
        animate('500ms ease-in')
      ]),
      transition('* => void', [
        animate('500ms ease-out', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class YourComponent {
  // component logic...
}

在上面的代码中，我们定义了一个名为rowAnimation的触发器，它有两个状态：fadeIn和void。我们定义了从void状态到任何状态的进入和退出过渡。

5. 在您的HTML模板中，应用动画：

  

    
Row content
  

在上面的代码中，我们在元素上使用了[@rowAnimation]绑定，并在click事件中切换了rowAnimationState状态。

6. 最后，在您的组件类中定义切换动画状态的方法：

export class YourComponent {
  rowAnimationState = '';

  toggleRowAnimation() {
    this.rowAnimationState = this.rowAnimationState === 'fadeIn' ? '' : 'fadeIn';
  }
}

在上面的代码中，我们使用toggleRowAnimation()方法切换rowAnimationState状态。

现在，当您点击元素时，动画将在进入和退出时应用。