<style>
div {
position:relative;
width:200px;
height:150px;
background-color:red;
transition-property: opacity;
opacity:1;
}
.hidden {
opacity:0;
}
</style>
<body>
<button id=show>Show</button>
<button id=hide>Hide</button>
<br>
<br>
<div id=div></div>
<script>
function show (elem, tm) {
if (elem.classList.contains('hidden')) {
elem.hidden = false;
elem.style.transitionDuration = tm + 'ms'
setTimeout(() => elem.classList.remove('hidden'), 0)
}
}
function hide (elem, tm) {
if (!elem.classList.contains('hidden')) {
elem.addEventListener('transitionend', () => elem.hidden = true, {once:true})
elem.style.transitionDuration = tm + 'ms'
elem.classList.add('hidden')
}
}
const div = document.getElementById('div')
document.getElementById('show')
.addEventListener('click', () => show(div, 1000));
document.getElementById('hide')
.addEventListener('click', () => hide(div, 1000))
</script>
</body>