Question

编辑：已回答。 transform: scaleY()对我的目的而言可以接受。对不起，对不起！

我正在为使用JavaScript触发的CSS动画创建一些代码。这个动画将应用于div元素，我想知道一种方法，我可以输入一个代表div的完整高度的值（div高度会有所不同）。我可以将to值设置为height: 100px来触发它，但这不是我想要的。

@keyframes slideIn {
    from {height: 0;}
    to {height: 100%;}
}

有没有办法在CSS中表示元素的完整高度？

Answer 1

post div的高度不固定，它是动态的。 100%使div填充其父级的总高度。你真正的意思是将div从0高度动画到自动高度，这在目前是不可动画的。您可以尝试其他方法，例如max-height或scaleY()，以获得纯CSS解决方案。或者，您可以使用JavaScript运行计算。

<强>最大高度

@keyframes slideIn {
    from {max-height: 0px;}
    to {max-height: 1000px;}
}

缺点

转换时间不一致
限制盒子高度

垂直比例

@keyframes slideIn {
    from {transform: scaleY(0);}
    to {transform: scaleY(1);}
}

缺点

不＆＃34;滑动＆＃34; div周围的空间
可以覆盖其他变换效果

Answer 2

如果你没有（想）知道前面的元素高度并且'成长'它会成为它通常占据的高度，你就不能使用height: 100%因为这会使元素占据100％其父元素高度。

但是，您可以告诉可以使用N<unit>的大小（其中N<unit>是10000px或1000em之类的任意值，或者无论什么漂浮你的船。）

@keyframes slideIn {
  from {max- height: 0;}
  to {max-height: 100%;}
}

但是为了使它能够工作，你还需要设置一些其他的属性（在动画之外）：

height: auto;
overflow: hidden;

@keyframes woot {
  from { max-height: 0; }
  to   { max-height: 100em; }
}

.example1 {
  max-height: 1em;
  overflow: hidden;
  transition: max-height 5s;
}
.example1:hover {
  max-height: 100em;
}

.example2 {
  overflow: hidden;
  animation: woot 5s infinite alternate;
}

<div class=container>
  <div class=example1>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et volutpat lectus, ac hendrerit dui. Donec a vehicula nunc. Integer eleifend blandit libero vitae porttitor. In auctor odio a diam commodo dignissim. Donec vitae nisi fermentum, hendrerit augue at, sagittis erat. Mauris at consectetur sem. Duis ligula metus, fermentum vel vulputate vitae, lacinia nec turpis. Sed nec nibh porttitor, congue neque nec, laoreet purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur facilisis mi imperdiet dignissim suscipit. Proin dictum varius velit eu eleifend. Vivamus imperdiet eleifend tortor, sit amet mollis leo auctor a. Sed condimentum nisi tortor, quis interdum sapien dignissim sed. Sed interdum, justo a ultrices sodales, risus nunc ultricies eros, et tempor nisl elit sed eros.
  </div>

  <br />
  
  <div class=example2>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et volutpat lectus, ac hendrerit dui. Donec a vehicula nunc. Integer eleifend blandit libero vitae porttitor. In auctor odio a diam commodo dignissim. Donec vitae nisi fermentum, hendrerit augue at, sagittis erat. Mauris at consectetur sem. Duis ligula metus, fermentum vel vulputate vitae, lacinia nec turpis. Sed nec nibh porttitor, congue neque nec, laoreet purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur facilisis mi imperdiet dignissim suscipit. Proin dictum varius velit eu eleifend. Vivamus imperdiet eleifend tortor, sit amet mollis leo auctor a. Sed condimentum nisi tortor, quis interdum sapien dignissim sed. Sed interdum, justo a ultrices sodales, risus nunc ultricies eros, et tempor nisl elit sed eros.
  </div>

</div>

虽然有一个问题，但您需要将max-height值夸大到您始终确定内容适合的点，并且它是所述最大高度的完整值，它计算的持续时间为动画，而不仅仅是可见部分。

CSS为100％高度

2 个答案: