diff --git a/_src/_assets/javascripts/page-about.js b/_src/_assets/javascripts/page-about.js index be78464..d10fa3e 100644 --- a/_src/_assets/javascripts/page-about.js +++ b/_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 = '+Show bios' + hide(item) } else { item.style.display = 'block' trigger.innerHTML = '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() + }) +} diff --git a/_src/_assets/styles/bigchain/_team.scss b/_src/_assets/styles/bigchain/_team.scss index 2b4f27b..17ebb85 100644 --- a/_src/_assets/styles/bigchain/_team.scss +++ b/_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 {