Question

所以我在对象（<div>）上有动画。

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

此动画显然是在创建对象时发生的。我现在需要的是动画或过渡效果，可以将对象缩小到max-height: 0px;。

给属性max-height一个过渡，然后将其在js中的值更改为0px不会执行任何操作。
还创建反向动画，然后重新放置原始动画具有克隆的对象，并且此动画不会使对象下降到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被删除之后。

Answer 1

做某事总是有不止一种方法。由于您正在使用动画设置高度，因此最好也使用动画来删除高度。考虑一下以100%结尾的动画。此时，您的max-height已设置。即使在元素上设置了过渡，动画也会阻止过渡按原样触发。动画事件即使是100％仍在触发。您可以从一开始就在animationend事件上设置事件监听器，然后暂停动画。我没有尝试过，但是可能有用。

我在您的案例中发现的是创建一个fade-out类和一个fade-out动画。由于使用了动画，因此从您的CSS中删除了对transition的所有引用。我想您可以走另一条路，只使用转场而不是动画，但是混合它们是您一直遇到的问题。

我在每个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>

将最大高度改回零作为过渡或动画

1 个答案: