只播放一次 CSS 动画

Question

1.div 容器在指令 (ng-show || ng-if) 显示时带有动画（过渡）。

2.由外部按钮控制的父div（添加样式属性display: none或display: block）

有问题：

如何只处理一次动画，当 1. - 显示时，但如果父级从 display: none 变为 display: block，则不要再次重复。

Answer 1

由于您的ng-show/ng-if 是由某些条件的更改触发的，您可以使用boolean 来确定显示是否为初始状态并将其设置在相同的上下文中。

然后您可以使用ng-class 将类初始添加到您的 div 并移动 css-transition 属性。

像这样：

HTML：

<div ng-class="{'initial': controller.initial}"></div>

CSS：

div.initial{
  transition: ...
}

JS/控制器：

functionThatSetsShowCondition(){
  controller.initial = true;
}