时间戳

首页 > 解决方案 > 只播放一次 CSS 动画

javascript - 只播放一次 CSS 动画

问题描述

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

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

有一个问题：

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

标签： javascriptcssangularjs

解决方案

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

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

像这样：

HTML：

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

CSS：

div.initial{
  transition: ...
}

JS/控制器：

functionThatSetsShowCondition(){
  controller.initial = true;
}

推荐阅读