Add height animation

Author: aloyr

src/utils/filter-containers.js

@@ -5,9 +5,11 @@ export function filterContainers() {
     let spanText = containers[i].querySelector('span').innerHTML;
     if (spanText.indexOf(filterValue) >= 0) {
       containers[i].classList.remove('hide');
+      containers[i].classList.add('show');
     }
     else {
       containers[i].classList.add('hide');
+      containers[i].classList.remove('show');
     }
   }
 }

src/vis-physical/index.js

@@ -22,7 +22,7 @@ let filterInput = filterDiv.append('input')
     .attr('id', 'filter')
     .attr('placeholder', 'filter containers');
 
-filterInput.addEventListener('keyup', filterContainers);
+filterInput.on('keyup', filterContainers);
 
 function removeVis() {
   cluster = wrapper.selectAll('.node-cluster')

src/vis-physical/styles.less

@@ -218,6 +218,20 @@
   }
 }
 
+@keyframes hide {
+  0% { opacity: 1; transform: scale(1); max-height: 500px; }
+  100% { opacity: 0; transform: scale(0); max-height: 0; }
+}
+
+@keyframes show {
+  0% { opacity: 0; transform: scale(0); max-height: 0; }
+  100% { opacity: 1; transform: scale(1); max-height: 500px; }
+}
+
 .hide {
-  display: none;
+  animation: hide .5s forwards;
+}
+
+.show {
+  animation: show .5s forwards;
 }