JSFiddle - React, Tailwind, and code Playground

by olvlvl

HTML

<p>Transitions don't work if the parent was "display: none"... but it works with "visibility"</p>

<button id="toggle">Toggle</button>

<div id="container1" class="container">
    <div class="child">
        Hello, I'm the child!
    </div>
</div>

<div id="container2" class="container">
    <div class="child">
        Hello, I'm the child!
    </div>
</div>

<div id="container3" class="container">
    <div class="child">
        Hello, I'm the child!
    </div>
</div>

CSS

.container {
    position: relative;
    height: 30px;
    overflow: hidden;
    background: silver;
    margin-top: 20px;
}

#container2 {
    visibility: hidden;
}

#container2.show {
    visibility: visible;
}

#container3 {
    display: none;
}

#container3.show {
    display: block;
}

.child {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom : 0;
    background: #4585F2;
    transition: all 1s;
    transform: translateY(30px);
    opacity: 0;
}

.show .child {
    transform: translateY(0px);
    opacity: 1;
}

JavaScript

var containers = document.getElementsByClassName('container')

document.getElementById('toggle').addEventListener('click', function(ev) {
    
    for (var i = 0, j = containers.length ; i < j  ; i++)
    {
        var container = containers[i]
        
        container.className = [container.className == 'container show' ? 'container' : 'container show']  
    }
    
}, false)