固定位置的全屏 div 到相对位置之间的过渡和动画

Question

我需要一个 div，它在开始时应该占据整个视口。经过一段延迟后，该 div 必须更改为相对位置并更改其尺寸以适应宽度和 16/9 比例。过渡必须是动画的，而不是即时的。

我尝试在延迟后添加一个类，但它并没有使其动画化......

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/n2swL6k3/1/

对我应该采取的方向有什么想法吗？

Answer 1

有这样的事吗？您应该瞄准身体边缘。

https://jsfiddle.net/to6c21ew/2/

setTimeout(function() {
  var deckContainers = document.querySelectorAll('div.deck-container');
  deckContainers.forEach(function(deckContainer) {
    deckContainer.classList.toggle('collapsed');
  });
}, 1300);

setTimeout(() => {
  document.body.style.margin = '16px';
}, 1300);

body {
  margin: 0px;
  transition: margin 1s;
}

div.deck-container {
  background-color: red;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: inline-block;
  position: fixed;
}

div.deck-container.collapsed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.div400px {
  height: 400px;
  width: 100%;
  background: grey;
}

.div100px {
  height: 100px;
  width: 100%;
  background: blue;
}

<div class="div100px"></div>
<div class="deck-container"></div>
<div class="div400px"></div>