当使用Angular动画在ngIf指令上进行离开过渡时，可能会出现过渡不起作用的情况。这是因为ngIf指令会立即从DOM中移除元素，而不会等待过渡动画完成。

要解决这个问题，可以使用ngIf的状态变化来触发过渡动画。以下是一个示例代码，演示了如何在ngIf上使用Angular动画的离开过渡：

在组件的HTML文件中，添加一个包裹ngIf指令的元素，并为该元素添加动画效果：

在组件的CSS文件中，定义进入和离开过渡的动画效果：

/* 定义进入过渡动画 */
@keyframes enterAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 定义离开过渡动画 */
@keyframes leaveAnimation {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 定义动画触发的状态和持续时间 */
.myAnimation.shown {
  animation: enterAnimation 0.5s;
}

.myAnimation.hidden {
  animation: leaveAnimation 0.5s;
}

在组件的TypeScript文件中，定义一个变量来控制ngIf的状态变化：

export class MyComponent {
  isShown: boolean = true;

  hideElement() {
    this.isShown = false;
  }
}

通过调用hideElement()方法，可以改变ngIf的状态，触发离开过渡动画。

请注意，要使用Angular动画，需要导入BrowserAnimationsModule模块，并将其添加到应用的imports数组中。

这样，当ngIf的状态从true变为false时，会触发离开过渡动画，元素会在过渡动画结束后从DOM中移除。