refactor 3-more into separate books

2015-02-27 13:21:58 +03:00 · 2015-02-27 13:21:58 +03:00 · 87639b2740
commit 87639b2740
parent bd1d5e4305
423 changed files with 9 additions and 9 deletions
--- a/5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html
+++ b/5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html
@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>img { display: block; cursor: pointer; }</style>
+  <style>
+  /**
+   * до анимации: .flyjet
+   * в начале анимации .flyjet .growing-init
+   * в процессе анимации .flyjet .growing-init .growing
+   * в конце анимации .flyjet
+   */
+
+    .flyjet {
+      width: 400px;
+      height: 240px;
+    }
+
+    .growing-init {
+      position: absolute;
+      height: 0;
+      width: 0;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto;
+
+      /* все свойства анимируются 3 секунды */
+      -webkit-transition: all 3s;
+      -moz-transition: all 3s;
+      -o-transition: all 3s;
+      -ms-transition: all 3s;
+    }
+
+    .growing {
+      width: 400px;
+      height: 240px;
+    }
+  </style>
+</head>
+<body>
+
+Кликните картинку для анимации. Расположение элементов при анимации не должно меняться!
+<table>
+<tr>
+<td>Догнать</td>
+<td><img onclick="growIn(this)" src="https://js.cx/clipart/flyjet.jpg" class="flyjet">
+</td>
+<td>..и перегнать!</td>
+</tr>
+</table>
+
+<b>В процессе анимации повторные клики на изображение игнорировать.</b>
+
+<script>
+function growIn(img) {
+  if (img.classList.contains('growing-init')) return;
+  console.log("growIn!");
+
+  var height = img.offsetHeight;
+  var width = img.offsetWidth;
+
+  // переместить изображение в placeholder постоянного размера
+  var placeholder = document.createElement('div');
+  placeholder.style.position = 'relative';
+  placeholder.style.width = width + 'px';
+  placeholder.style.height = height + 'px';
+  img.parentNode.replaceChild(placeholder, img);
+  placeholder.appendChild(img);
+
+  img.classList.add('growing-init');
+
+  // откладываем на следующий фрейм, чтобы началась анимация
+  // иначе изменение свойств IMG не будет замечено
+  requestAnimationFrame(function() {
+
+    // Firefox иногда не стартует анимацию, 
+    // если не отложить classList.add ещё на один кадр (tested: FF30-)
+    requestAnimationFrame(function() {
+      img.classList.add('growing');
+ 
+      img.addEventListener('transitionend', done);
+    });
+  });
+
+  function done(e) {
+    // сработать только первый раз
+    img.removeEventListener('transitionend', done);
+
+    placeholder.parentNode.replaceChild(img, placeholder);
+    
+    img.classList.remove('growing');
+    img.classList.remove('growing-init');
+
+    alert('ok');
+  }
+  
+
+}
+</script>
+
+</body>
+</html>
+
+