From dfc7a1ddb93a15f6f62ee5bb86e1f062abd9076d Mon Sep 17 00:00:00 2001
From: Peli de Halleux <jhalleux@microsoft.com>
Date: Wed, 30 Nov 2016 03:32:53 -0800
Subject: [PATCH] nicer simulator animation

---
 pxtarget.json                           |   2 +
 theme/site/modules/transition.overrides | 172 ++++++++++++++++++++++++
 theme/style.less                        |   1 -
 3 files changed, 174 insertions(+), 1 deletion(-)

diff --git a/pxtarget.json b/pxtarget.json
index 52a08434..331f5fbb 100644
--- a/pxtarget.json
+++ b/pxtarget.json
@@ -288,6 +288,8 @@
         ],
         "invertedMenu": true,
         "invertedToolbox": true,
+        "simAnimationEnter": "rotate in",
+        "simAnimationExit": "rotate out",
         "blocklyOptions": { }
     }
 }
diff --git a/theme/site/modules/transition.overrides b/theme/site/modules/transition.overrides
index cba59efe..d7ab3281 100644
--- a/theme/site/modules/transition.overrides
+++ b/theme/site/modules/transition.overrides
@@ -1,3 +1,175 @@
 /*******************************
          Site Overrides
 *******************************/
+
+
+/*--------------
+      Rotate In
+---------------*/
+
+/* Inward */
+.transition.rotate {
+  animation-duration: 0.6s;
+  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+}
+.transition.rotate.in {
+  animation-name: rotateIn;
+}
+.transition[class*="rotate down left"].in {
+  animation-name: rotateInDownLeft;
+}
+.transition[class*="rotate down right"].in {
+  animation-name: rotateInDownRight;
+}
+.transition[class*="rotate up left"].in {
+  animation-name: rotateInUpLeft;
+}
+.transition[class*="rotate up right"].in {
+  animation-name: rotateInUpRight;
+}
+
+/* Outward */
+.transition.rotate.out {
+  animation-name: rotateOut;
+}
+.transition[class*="rotate down left"].out {
+  animation-name: rotateOutDownLeft;
+}
+.transition[class*="rotate down right"].out {
+  animation-name: rotateOutDownRight;
+}
+.transition[class*="rotate up left"].out {
+  animation-name: rotateOutUpLeft;
+}
+.transition[class*="rotate up right"].out {
+  animation-name: rotateOutUpRight;
+}
+
+/* In */
+@keyframes rotateIn {
+  from {
+    transform-origin: center;
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: center;
+    transform: none;
+    opacity: 1;
+  }
+}
+@keyframes rotateInDownLeft {
+  from {
+    transform-origin: left bottom;
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: left bottom;
+    transform: none;
+    opacity: 1;
+  }
+}
+@keyframes rotateInDownRight {
+  from {
+    transform-origin: right bottom;
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: right bottom;
+    transform: none;
+    opacity: 1;
+  }
+}
+@keyframes rotateInUpLeft {
+  from {
+    transform-origin: left bottom;
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: left bottom;
+    transform: none;
+    opacity: 1;
+  }
+}
+@keyframes rotateInUpRight {
+  from {
+    transform-origin: right bottom;
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: right bottom;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+/* Out */
+@keyframes rotateOut {
+  from {
+    transform-origin: center;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: center;
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+@keyframes rotateOutDownLeft {
+  from {
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: left bottom;
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+@keyframes rotateOutDownRight {
+  from {
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: right bottom;
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+@keyframes rotateOutUpLeft {
+  from {
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: left bottom;
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+@keyframes rotateOutUpRight {
+  from {
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: right bottom;
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/theme/style.less b/theme/style.less
index 055e13c8..12ed6ee4 100644
--- a/theme/style.less
+++ b/theme/style.less
@@ -41,7 +41,6 @@
   width: 100%;
 }
 
-
 /*******************************
              Blockly
 *******************************/