Делал демо angularjs animations with animate.css, слайдер получился :)
http://nervgh.github.io/pages/angularjs-and-animatecss/ |
|
калькулятор для подбора типоразмера шин
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
function TireController($scope) {
//набор 1
var IVALUE = 25.4;
var I2VALUE = 0.02;
$scope.sectionWidthSet1 = 0;
$scope.aspectRatioSet1 = 0;
$scope.rimDiameter_Inch_Set1 = 0;
//набор 2
$scope.sectionWidthSet2 = 0;
$scope.aspectRatioSet2 = 0;
$scope.rimDiameter_Inch_Set2 = 0;
//расчетные данные
$scope.rimHeight_mm_Set1;
$scope.innDiameterSet1;
$scope.extDiameterSet1;
$scope.rimHeight_mm_Set2;
$scope.innDiameterSet2;
$scope.extDiameterSet2;
$scope.roadClearance;
$scope.computing=function(){
// Внутренний диаметр, мм
$scope.innDiameterSet1 = Math.round($scope.rimDiameter_Inch_Set1 * IVALUE);
$scope.innDiameterSet2 = Math.round($scope.rimDiameter_Inch_Set2 * IVALUE);
// Внешний диаметр, мм
$scope.extDiameterSet1 = Math.round($scope.sectionWidthSet1 * $scope.aspectRatioSet1 * I2VALUE + $scope.innDiameterSet1);
$scope.extDiameterSet2 = Math.round($scope.sectionWidthSet2 * $scope.aspectRatioSet2 * I2VALUE + $scope.innDiameterSet2);
//Высота профиля, мм
$scope.rimHeight_mm_Set1 = Math.round(($scope.extDiameterSet1 - $scope.innDiameterSet1)/2);
$scope.rimHeight_mm_Set2 = Math.round(($scope.extDiameterSet2 - $scope.innDiameterSet2)/2);
//Изменение значения клиренса
$scope.roadClearance = ( $scope.extDiameterSet2 - $scope.extDiameterSet1 )/2;
}
//do calculation
$scope.computing();
}
</script>
</head>
<body>
<div ng-controller="TireController">
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-5 col-md-offset-1">
<b>Старый размер</b>:
<select class="form-control" ng-model="sectionWidthSet1" ng-change="computing()">
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
<option selected="selected" value="175">175</option>
<option value="185">185</option>
<option value="195">195</option>
<option value="205">205</option>
<option value="215">215</option>
<option value="225">225</option>
<option value="235">235</option>
<option value="245">245</option>
<option value="255">255</option>
<option value="265">265</option>
<option value="275">275</option>
<option value="285">285</option>
<option value="295">295</option>
<option value="305">305</option>
<option value="315">315</option>
<option value="325">325</option>
</select>
/
<select class="form-control" ng-model="aspectRatioSet1" ng-change="computing()">
<option value="0">—</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
<option value="60">60</option>
<option value="65">65</option>
<option selected="selected" value="70">70</option>
<option value="75">75</option>
<option value="80">80</option>
<option value="85">85</option>
</select>
R
<select class="form-control" ng-model="rimDiameter_Inch_Set1" ng-change="computing()">
<option value="12">12</option>
<option selected="selected" value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
</select>
<br>
</div>
<div class="col-md-5">
<b>Новый размер</b>:
<select class="form-control" ng-model="sectionWidthSet2" ng-change="computing()">
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
<option selected="selected" value="175">175</option>
<option value="185">185</option>
<option value="195">195</option>
<option value="205">205</option>
<option value="215">215</option>
<option value="225">225</option>
<option value="235">235</option>
<option value="245">245</option>
<option value="255">255</option>
<option value="265">265</option>
<option value="275">275</option>
<option value="285">285</option>
<option value="295">295</option>
<option value="305">305</option>
<option value="315">315</option>
<option value="325">325</option>
</select>
/
<select class="form-control" ng-model="aspectRatioSet2" ng-change="computing()">
<option value="0">—</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
<option value="60">60</option>
<option value="65">65</option>
<option selected="selected" value="70">70</option>
<option value="75">75</option>
<option value="80">80</option>
<option value="85">85</option>
</select>
R
<select class="form-control" ng-model="rimDiameter_Inch_Set2" ng-change="computing()">
<option value="12">12</option>
<option selected="selected" value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
</select>
</div>
</div>
</div>
</div>
|
часть 2 калькулятора - почему то ограничение на 10000 символов в посте.
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Расчетные данные</h3>
</div>
<div class="panel-body">
<div class="col-md-12 clearfix">
<p>
Клиренс изменится на: <span class="badge badge-info">{{ roadClearance }}</span>
</p>
</div>
<div class="col-md-12 center-block">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>
Размер
</th>
<th>
Старый вариант
</th>
<th>
Новый вариант
</th>
<th>
Разница
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Ширина шины, мм (A)
</td>
<td>
{{ sectionWidthSet1 }}
</td>
<td>
{{ sectionWidthSet2 }}
</td>
<td>
{{ sectionWidthSet1 - sectionWidthSet2 }}
</td>
</tr>
<tr>
<td>
Высота профиля, мм (B)
</td>
<td>
{{ rimHeight_mm_Set1 }}
</td>
<td>
{{ rimHeight_mm_Set2 }}
</td>
<td>
{{ rimHeight_mm_Set1 - rimHeight_mm_Set2 }}
</td>
</tr>
<tr>
<td>
Внутренний диаметр, мм (C)
</td>
<td>
{{ innDiameterSet1 }}
</td>
<td>
{{ innDiameterSet2 }}
</td>
<td>
{{ innDiameterSet1 - innDiameterSet2 }}
</td>
</tr>
<tr>
<td>
Внешний диаметр, мм (D)
</td>
<td>
{{ extDiameterSet1 }}
</td>
<td>
{{ extDiameterSet2 }}
</td>
<td>
{{ extDiameterSet1 - extDiameterSet2 }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Нужно было сделать такую "анимацию": кликаем, стили применяются сразу. Кликаем ещё раз, стили пропадают через время. То бишь, эдакий 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; /* снимаем время анимации, получаем мгновенное применение стилей */
}
|
Цитата:
|
|
kazemir,
что это за ад?) |
Цитата:
|
Цитата:
- direction-links - previous-text - next-text - boundary-links - first-text - last-text которые, по сути, задают отображение в шаблоне. У меня их просто нет, только сервис. Т.е. шаблон настраивается произвольно, как угодно. Иными словами, можно легко сделать враппер-директиву с нужной разметкой и использовать. Или, как у меня в примере, использовать контроллер с подгружаемыми шаблонами, Или вообще не подгружать шаблоны, а писать его прямо в разметку :) Возможность задавать общие опции для всех экземпляров пагинатора (конфигурировать) Поскольку, сервис - функция, можно расширить ее прототип и доп. методы/свойства будут у всех созданных ею экземпляров. |
| Часовой пояс GMT +3, время: 21:50. |