时间戳

首页 > 解决方案 > 将最大高度更改为零作为过渡或动画

javascript - 将最大高度更改为零作为过渡或动画

问题描述

所以我有一个对象（<div>）的动画。

@keyframes fade-in-left {
0% {
    max-height: 0px;
}
100% {
    max-height: 200px;
}

这个动画显然是在创建对象时发生的。我现在需要的是一个动画或过渡，将我的对象缩小到max-height: 0px;.

（请记住，我对更改比例或其他变换属性不感兴趣）

感谢您的建议！

更多细节：

我的<div>对象：

    @keyframes fade-in-left {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 200px;
    }
 }

.law-list .law-item {
    -webkit-transition: max-height .9s linear;
    -moz-transition: max-height .9s linear;
    -ms-transition: max-height .9s linear;
    -o-transition: max-height .9s linear;
    transition: max-height .9s linear;
}

.fade-in {
    -webkit-animation-duration: .9s;
    animation-duration: .9s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fade-in-left;
         animation-name: fade-in-left;
}

我在 js 中创建我的 html 内容，html 元素如下所示：

<div class='law-item fade-in' id='law_0'>Law Nr.1</div>
<div class='law-item fade-in' id='law_1'>Law Nr.2</div>

所以当一个元素被创建时，max-height动画就会播放。

当我想删除一个对象时，我希望出现上述情况：淡出动画然后删除。

我在一个js函数中处理他：

function removeLaw(id) {
    document.getElementById("law_" + id).style.maxHeight = "0px";
    setTimeout(function() {
        document.getElementById("law_" + id).parentElement.removeChild(document.getElementById("law_" + id));
    }, 900);
}

如前所述，它应该淡出到 0 max-height。但它所做的一切都保持在当前状态max-height，然后max-height被删除。

标签： javascriptcss

解决方案

做某事的方法总是不止一种。由于您使用动画来设置高度，因此最好也使用动画来移除高度。想想以 结尾的动画100%。在这一点上，你max-height的设置。即使您在元素上设置了过渡，动画也会阻止过渡按应有的方式触发。动画事件仍在触发，即使它处于 100%。您可以从一开始就在事件上设置事件侦听animationend器并暂停动画。我还没有尝试过，但它可能会起作用。

我在您的案例中发现的是创建一个fade-out类和一个fade-out动画。transition自从我使用动画以来，我从您的 css中删除了所有引用。我想你可以换一种方式，只使用过渡而不是动画，但混合它们是你一直遇到的问题。

我在每个上创建了一个基本的单击事件侦听器，law-item并在新动画结束时删除之前更改了项目上的类。

function removeLaw(id) {
   var el = document.getElementById(id);
   el.classList.remove('fade-in');
   el.classList.add('fade-out');
   el.addEventListener('animationend', function(e) {
    el.remove();
   })
}

var lawItems = document.querySelectorAll('.law-item');

lawItems.forEach(function(lawItem){
  this.addEventListener('click', function(e) {
    removeLaw(e.target.id)
  })
})
@keyframes fade-in-left {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 200px;
    }
 }
 
 @keyframes fade-out-left {
    0% {
        max-height: 200px;
    }
    100% {
        max-height: 0px;
    }
 }

.law-list .law-item {
    height: 200px;

}

.fade-in {
    -webkit-animation-duration: 900ms;
    animation-duration: 900ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fade-in-left;
         animation-name: fade-in-left;
}

.fade-out {
    -webkit-animation-duration: 900ms;
    animation-duration: 900ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fade-out-left;
         animation-name: fade-out-left;
}
<div class='law-list'>

  <div class='law-item fade-in' id='law_0'>Law Nr.1</div>
  <div class='law-item fade-in' id='law_1'>Law Nr.2</div>

</div>

推荐阅读