双向CSS高度动画 [英] Bi-directional CSS height animation

问题描述

@keyframes mgm {
  from {
    max-height: 250px;
  }
  
  to {
    max-height: 0px;
  }
}
  
.mgm {
    width: 180px;
    border: 1px solid black;
    padding: 10px;
    animation: mgm 1s ease-in-out;
    max-height: 250px;
    overflow:hidden;
}

<div class="mgm">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, 
  blanditiis qui porro possimus commodi laudantium voluptatum accusantium. 
  Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur 
  asperiores fugiat ducimus!
</div>

通过运行以上代码，内容的高度仅从底部减小，而动画在顶部停止.但我想从底部到顶部均等地降低高度，即动画应停在内容的中心.

By running above code, height of the content is decreasing from bottom only and animation stops at the top. But I want to decrease the height from both bottom and top equally i.e; animation should stop at the centre of the content.

如何实现这一目标?

替代方法-是的，我们可以使用 scaleY CSS属性来执行此操作，但是它会缩小内部内容.如下所示-

Alternate approach - Yes we can do this by using scaleY CSS property but it shrinks the internal content. As given below -

@keyframes mgm {
  from {
    transform:scaleY(1);
  }
  
  to {
    transform:scaleY(0);
  }
}
  
.mgm {
    width: 180px;
    border: 1px solid black;
    padding: 10px;
    animation: mgm 1s ease-in-out;
    max-height: 250px;
    overflow:hidden;
}

<div class="mgm">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, 
  blanditiis qui porro possimus commodi laudantium voluptatum accusantium. 
  Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur 
  asperiores fugiat ducimus!
</div>

推荐答案

在不需要处理高度的情况下，使用 clip-path 的另一种想法

Another idea using clip-path where you don't need to deal with height

@keyframes mgm {
  to {
    clip-path: inset(50% 0);
  }
}

.mgm {
  width: 180px;
  border: 1px solid black;
  padding: 10px;
  animation: mgm 1s ease-in-out infinite alternate;
  clip-path: inset(0 0);
}

<div class="mgm">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, blanditiis qui porro possimus commodi laudantium voluptatum accusantium. Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur asperiores fugiat ducimus!
</div>

要获得边框效果，可以考虑使用如下伪元素:

To get the border effect, you can consider a pseudo element like below:

.mgm {
  width: 180px;
  padding: 10px;
  animation: mgm 1s linear infinite alternate;
  clip-path: inset(0 0);
  position: relative;
}

@keyframes mgm {
  to {
    clip-path: inset(50% 0);
  }
}

.mgm:before {
  content: "";
  position: absolute;
  border: 1px solid black;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 1px 0;
  animation: inherit;
  animation-name: mgm-b;
}

@keyframes mgm-b {
  to {
    margin: 50% 0;
  }
}

<div class="mgm">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, blanditiis qui porro possimus commodi laudantium voluptatum accusantium. Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur asperiores fugiat ducimus!
</div>

如果您不希望透明，则伪元素就足够了:

The pseudo element can be enough if you don't want transparency:

.mgm {
  width: 180px;
  padding: 10px;
  position: relative;
  overflow:hidden;
}

.mgm:before {
  content: "";
  position: absolute;
  border: 1px solid black;
  box-shadow:0 0 0 200vmax #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 1px 0;
  animation: mgm 1s linear infinite alternate;
}

@keyframes mgm {
  to {
    margin: 50% 0;
  }
}

<div class="mgm">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, blanditiis qui porro possimus commodi laudantium voluptatum accusantium. Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur asperiores fugiat ducimus!
</div>

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