more bio tweaks

_src/_assets/javascripts/page-about.js

@@ -6,13 +6,60 @@ document.addEventListener('DOMContentLoaded', function() {
     trigger.addEventListener('click', function(e) {
         for (var i = 0; i < bio.length; ++i) {
             var item = bio[i]
+
             if (item.style.display == 'block') {
                 item.style.display = 'none'
                 trigger.innerHTML = '<span>+</span>Show bios'
+                hide(item)
             } else {
                 item.style.display = 'block'
                 trigger.innerHTML = '<span>−</span>Hide bios'
+                show(item)
             }
         }
     })
 })
+
+function show(ele) {
+    raf = window.requestAnimationFrame(function() {
+        var opacity = 0
+        var height = 0
+
+        function increase () {
+            opacity += 0.1
+            height += 1
+            if (opacity >= 1) {
+                // complete
+                ele.style.opacity = 1
+                ele.style.height = '100%'
+                return true
+            }
+            ele.style.opacity = opacity
+            ele.style.height = height + '%'
+
+            requestAnimationFrame(increase)
+        }
+        increase()
+    });
+}
+
+function hide(ele) {
+    raf = window.requestAnimationFrame(function() {
+        var opacity = 1
+        var height = '100%'
+        function decrease () {
+            opacity += 0.1
+            height += 1
+            if (opacity >= 1) {
+                // complete
+                ele.style.opacity = 0
+                ele.style.height = 0
+                return true
+            }
+            ele.style.opacity = opacity
+            ele.style.height = height + '%'
+            requestAnimationFrame(decrease)
+        }
+        decrease()
+    })
+}

_src/_assets/styles/bigchain/_team.scss

@@ -69,6 +69,13 @@
     margin-bottom: 0;
     margin-top: $spacer;
     display: none;
+    opacity: 0;
+    height: 0;
+    transition: .4s ease-out;
+
+    p:last-child {
+        margin-bottom: 0;
+    }
 }
 
 .team__bio__trigger {