Question

我必须将父Div的高度设置为某些值，因为我希望在div消失时进行一些过渡/动画处理，以便将高度缓慢设置为0。

我的问题是，如果我不设置身高，但过渡不起作用，但如果我这样做，父母就不考虑孩子的身高。

Answer 1

不幸的是，如果不将元素的height设置为绝对值，则无法对其进行动画处理。但是您可以尝试使用transform属性。

如果您不想使用transform属性，而真的想制作height的动画，则需要使用JS函数，该函数在过渡开始时计算父元素的高度

编辑：：添加了用JS动画剪切的代码。当父元素上有padding或margins时，您必须编辑我的代码。

  function startTransition() {
      // Get element which is animated
      let element = document.getElementById('animated');
      // Get element's height
      let height = element.getBoundingClientRect().height;
      // Apply element's height as absolute value
      element.style.height = height + 'px';
      // Make sure that height is set using setTimeout
      setTimeout(() => {
         // Add class wich handels animation
         element.classList.add('parent__animate');
      }, 10);
}

// Start animation after 1s
 setTimeout(() => {
     startTransition();
 },1000);

.parent {
    position: relative;
    transition: height 2s linear;
    overflow: hidden;
}

.parent__animate {
    height: 0px !important;
}

.child {
    position: relative;
    background: green;
}

.child span {
    display: block;
}

<div id="animated" class="parent">
    <div class="child">
        <span>Content</span>
        <span>with</span>
        <span>dynamic</span>
        <span>height</span>
    </div>
</div>

<div style="background: red;">
    <span>Next element</span>
</div>

.parent{
   position: relative;
   transform: scaleY(1.0);
   transform-origin: top center;
   transition: transform 2s linear;
}

.parent:hover{
  transform: scaleY(0);
}

.child{
   position: relative;
   background: red;
}

.child span{
   display: block;
}

Hover over parent element to start the transition.

<div class="parent">
   <div class="child">
      <span>Content</span>
      <span>with</span>
      <span>dynamic</span>
      <span>height</span>
   </div>
</div>

将“父Div高度”设置为“子Div高度”？

1 个答案: