Играйте в 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 / Контроллер:

functionThatSetsShowCondition(){
  controller.initial = true;
}