nicer simulator animation

pxtarget.json

@@ -288,6 +288,8 @@
         ],
         "invertedMenu": true,
         "invertedToolbox": true,
+        "simAnimationEnter": "rotate in",
+        "simAnimationExit": "rotate out",
         "blocklyOptions": { }
     }
 }

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;
+  }
+}

theme/style.less

@@ -41,7 +41,6 @@
   width: 100%;
 }
 
-
 /*******************************
              Blockly
 *******************************/