I am in need of a div element that initially occupies the entire viewport. After a specified delay, this div should transition to a relative position and adjust its dimensions to fit the width while maintaining a 16/9 ratio. The transition must be smooth and animated.
I attempted to achieve this by adding a class after a delay, but unfortunately, it did not result in the desired animation...
setTimeout(function() {
var deckContainers = document.querySelectorAll('div.deck-container');
deckContainers.forEach(function(deckContainer) {
deckContainer.classList.toggle('collapsed');
});
}, 800);
.deck-container {
background-color: red;
top:0;
left:0;
width:100vw;
height:100vh;
display: inline-block;
transition: all 0.5s ease-in-out;
position: fixed;
}
.deck-container.collapsed {
position: relative;
width: 100%;
padding-bottom: 56.25%;
overflow: hidden;
}
https://jsfiddle.net/LaitEau/feo78wyg/ https://jsfiddle.net/LaitEau/n2swL6k3/1/
If you have any suggestions on how I can achieve this effect successfully, I would greatly appreciate it.
For reference, here is a gif demonstrating the prototype of the behavior I am aiming for: