renames

2017-05-25 11:56:32 +03:00 · 2017-05-25 11:56:32 +03:00 · 455d300d8d
commit 455d300d8d
parent 787d58a83f
280 changed files with 2 additions and 2 deletions
--- a/3-animation/2-css-animations/boat.view/index.html
+++ b/3-animation/2-css-animations/boat.view/index.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <img src="https://js.cx/clipart/boat.png" id="boat">
+
+  <script>
+    boat.onclick = function() {
+
+      this.onclick = null; // only the first click should start the animation
+
+      let times = 1;
+
+      function go() {
+        if (times % 2) {
+          boat.classList.remove('back');
+          boat.style.marginLeft = 100 * times + 200 + 'px';
+        } else {
+          boat.classList.add('back');
+          boat.style.marginLeft = 100 * times - 200 + 'px';
+        }
+
+      }
+
+      go();
+
+      boat.addEventListener('transitionend', function() {
+        times++;
+        go();
+      });
+    }
+  </script>
+
+
+</body>
+
+</html>