Нужно было сделать такую "анимацию": кликаем, стили применяются сразу. Кликаем ещё раз, стили пропадают через время. То бишь, эдакий addClass через таймаут, но без JS-императива.
Всё проклял, пока не понял простую вещь - для определения параметров анимации ангуляр читает стили. нужно читать доки
в общем, вот пример :
элемент станет красным мгновенно, а синим- через время (одну секунду)
<html><head>
<style>.test {
color: #00f;
font-size: 48px;
-webkit-transition-property: color, font-size;
transition-property: color, font-size;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: steps(1);
transition-timing-function: steps(1);
}
.hidden-add {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.hidden {
color: #f00;
font-size: 36px;
}</style>
<style type="text/css"></style></head>
<body>
<div ng-app="app" ng-init="hidden = true" class="ng-scope">
<button ng-click="hidden = !hidden">Toggle</button>
<div ng-class="{hidden: hidden}" class="test-animation test hidden">myEl</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script><script src="https://code.angularjs.org/1.2.16/angular-animate.min.js"></script>
<script>
var app = angular.module('app', ['ngAnimate']);
</script>
</body></html>
Тут зарыт трюк, поэтому его поясню. Зарыт он в стилях. Префиксы уберу за простотой.
/* Начальные стили - цвет и размер шрифта */
.test {
color: #00f;
font-size: 48px; }
/* конечные стили - другие цвет и размер шрифта */
.hidden {
color: #f00;
font-size: 36px; }
/* Параметры анимации */
.test {
transition-property: color, font-size; /* Анимируем изменение свойств цвет и размер шрифта */
transition-duration: 1s; /* длительность прописана чисто для ангуляра */
transition-timing-function: steps(1); /* смягчение не нужно - нужно, чтобы стили ставились мгновенно. так что сюда подходит лестничная функция с одной ступенькой с конца */
}
/* Анимация добавления класса */
.hidden-add {
transition-duration: 0s; /* снимаем время анимации, получаем мгновенное применение стилей */
}
