Question

当我对诸如下面的高度之类的某些属性进行动画处理时，一旦动画完成，它就会捕捉回到不同的高度或没有高度。我尝试将height: auto设置为可以保持100％的水平，但这似乎无济于事。不确定我缺少什么，以便该属性的值保留在动画的结尾。

.parent {
    animation: expand 3s 1;
}

@keyframes expand {

   from {
     width: 0%;
     height: 0%;
   }

    to {
      width: 50%;
      height: 100%;

    }

  }

<div class="parent" style="background-color: red;">


 </div>

Answer 1

使用animation-fill-mode: forwards。这将使动画的最终值在动画结束后保留。

在您的情况下，只需将forwards附加到animation的简写中即可。

Answer 2

您尝试过这样吗

function AnimationListener(e) {     
    var clientHeight = e.target.clientHeight;
    var clientwidth= e.target.clientWidth;
  //  alert('height - '+clientHeight+'  width - '+clientwidth);
    console.log('height - '+clientHeight+'  width - '+clientwidth);
}

var anim = document.getElementById("parent");
anim.addEventListener("animationend", AnimationListener, false);

<head>
  <style>
   html{
      height: 100%;
    }
    body{
      height: 100%;
    }
    .parent {
        animation: expand 3s 1 forwards;
    }

    @keyframes expand {

       from {
         width: 0%;
         height: 0%;
       }

        to {
          width: 50%;
          height: 100%;

        }

      }
    </style>
 </head>

<div class="parent" id="parent"  style="background-color: red;">
 
 </div>

CSS：如何获取元素的高度以保持最终的动画高度？

2 个答案: