Merge pull request #3346 from hypothesis/adder-enter-animation

Add enter/exit animation when adder is shown

h/static/scripts/annotator/adder.js

@@ -39,6 +39,7 @@ function Adder(element) {
   this.element = element;
 
   var view = element.ownerDocument.defaultView;
+  var enterTimeout;
 
   // Set initial style. The adder is hidden using the `visibility`
   // property rather than `display` so that we can compute its size in order to
@@ -56,6 +57,8 @@ function Adder(element) {
 
   /** Hide the adder */
   this.hide = function () {
+    clearTimeout(enterTimeout);
+    element.className = classnames({'annotator-adder': true});
     element.style.visibility = 'hidden';
   };
 
@@ -131,6 +134,11 @@ function Adder(element) {
     element.style.top = toPx(top);
     element.style.left = toPx(left);
     element.style.visibility = 'visible';
+
+    clearTimeout(enterTimeout);
+    enterTimeout = setTimeout(function () {
+      element.className += ' is-active';
+    }, 1);
   };
 }
 

h/static/scripts/annotator/test/adder-test.js

@@ -18,6 +18,7 @@ describe('adder', function () {
   });
 
   afterEach(function () {
+    adderCtrl.hide();
     adderCtrl.element.parentNode.removeChild(adderCtrl.element);
   });
 

h/static/styles/annotator/adder.scss

+$adder-transition-duration: 80ms;
+
 .annotator-adder {
+  // Adder entry animation settings
+  animation-duration: $adder-transition-duration;
+  animation-timing-function: ease-in;
+  animation-fill-mode: forwards;
+
   box-sizing: border-box;
   direction: ltr;
   position: absolute;
@@ -7,6 +14,26 @@
   border-radius: 4px;
   box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15);
   z-index: 999;
+
+  // Give the adder a very low opacity initially.  It will then fade-in when
+  // shown.
+  opacity: 0.05;
+}
+
+@keyframes adder-fade-in {
+  0% { opacity: 0.05; }
+  20% { opacity: 0.7; }
+  100% { opacity: 1.0; }
+}
+
+@keyframes adder-pop-up {
+  from { transform: scale(0.8) translateY(10px); }
+  to { transform: scale(1.0) translateY(0px); }
+}
+
+@keyframes adder-pop-down {
+  from { transform: scale(0.8) translateY(-10px); }
+  to { transform: scale(1.0) translateY(0px); }
 }
 
 @mixin adder-arrow($rotation) {
@@ -25,11 +52,19 @@
   width: 6px;
 }
 
+.annotator-adder--arrow-down.is-active {
+  animation-name: adder-fade-in, adder-pop-up;
+}
+
 .annotator-adder--arrow-down:before {
   @include adder-arrow(45deg);
   bottom: -5px;
 }
 
+.annotator-adder--arrow-up.is-active {
+  animation-name: adder-fade-in, adder-pop-down;
+}
+
 .annotator-adder--arrow-up:before {
   @include adder-arrow(225deg);
   top: -5px;
@@ -60,6 +95,8 @@
   padding-bottom: 6px;
   padding-left: 10px;
   padding-right: 10px;
+
+  transition: color $adder-transition-duration;
 }
 
 .annotator-adder-actions .annotator-adder-actions__button:hover {
@@ -75,4 +112,5 @@
   margin: 2px 0px;
   font-family: sans-serif;
   color: $gray-light !important;
+  transition: color $adder-transition-duration;
 }