javascript - 只播放一次 CSS 动画

Question

1.div 容器，在指令 ( ng-show || ng-if ) 显示时带有动画(转换)。

2.由外部按钮控制的Parent div(添加样式属性 display: none 或 display: block )

有问题:

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

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/ Controller :

functionThatSetsShowCondition(){
  controller.initial = true;
}