Показать сообщение отдельно
  #35 (permalink)  
Старый 22.05.2014, 12:08
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Нужно было сделать такую "анимацию": кликаем, стили применяются сразу. Кликаем ещё раз, стили пропадают через время. То бишь, эдакий 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; /* снимаем время анимации, получаем мгновенное применение стилей */
}

Последний раз редактировалось melky, 22.05.2014 в 12:18.
Ответить с цитированием