moving transitions example

rachelandrew · rachelandrew · commit 03e88541692a · 2021-03-10T09:57:52.000Z
diff --git a/transitions/js-transitions.html b/transitions/js-transitions.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>JavaScript transitions demo</title>
+    <style>
+        body { 
+            background-color: #fff;
+            color: #333;
+            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
+            padding: 0;
+            margin: 0;
+        }
+
+        h1 {
+            font-size: 1.2em;
+        }
+
+        main {
+            max-width: 960px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .ball {
+            border-radius: 25px;
+            width: 50px;
+            height: 50px;
+            background: #c00;
+            position: absolute;
+            top: 0;
+            left: 0;
+            transition: transform 1s;
+        }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Click anywhere to move the ball</h1>
+      <div id="foo" class="ball"></div>
+    </main>
+   
+  </body>
+  <script>
+    var f = document.getElementById('foo');
+    document.addEventListener('click', function(ev){
+      f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+      f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+    },false);
+  </script>
+</html>
