动画元素替换 [英] Animated element replacement

问题描述

请告诉我如何根据子元素的高度使容器的高度平滑增加和减小我的代码无需动画即可工作

please tell me how to make the container smoothly increase in height and decrease depending on the height of the child element My code work without animation

setTimeout(() => {
  document.getElementById("page1").style = "display:none";
  document.getElementById("page2").style = "display:block";
}, 5000);

setTimeout(() => {
  document.getElementById("page1").style = "display:none";
  document.getElementById("page2").style = "display:block";
}, 15000);

.container {
  width: 50vmin;
  background: green;
  transition: all 5s ease;
  display: block;
}

#page1 {
  width: 25vmin;
  height: 50vmin;
  background: red;
  display: block;
}

#page2 {
  width: 25vmin;
  height: 10vmin;
  background: black;
  display: none;
}

<div class="container">
  <div id="page1"></div>
  <div id="page2"></div>
</div>

推荐答案

每当您应用转场时，请将转场动画应用到要观看的元素上并使其平滑动画.

Whenever you apply a transition, apply the transition animation to the element you want to watch and make it smooth animation.

还要注意:，要观看高度动画，请更新样式 height 样式，而不是更新不显示并阻止.

Also note: Instead of updating display none and block, as you want to watch the height animation, update the style height style.

这是一个有效的示例:

setTimeout(() => {
  document.getElementById("page1").style = "height:20vmin";
  document.getElementById("page2").style = "height:20vmin";
}, 5000);

.container {
  width: 50vmin;
  background: green;
  display: block;
}

#page1 {
  width: 25vmin;
  height: 50vmin;
  background: red;
  display: block;
  transition: all 5s ease;
}

#page2 {
  width: 25vmin;
  height: 10vmin;
  background: black;
  display: none;
  transition: all 5s ease;
}

<div class="container">
  <div id="page1"></div>
  <div id="page2"></div>
</div>

这篇关于动画元素替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！