使用 LWC 删除元素时对 DOM 元素进行动画处理

Question

我必须为 Toast 通知设置动画，我目前正在使用过渡来显示它来自顶部。这对我来说看起来不错，我想如此严厉地阻止其他 Toast 通知的突然移动，有什么方法可以让它们顺利地覆盖空间吗？

当前CSS：

.slds-transition-hide {
    transition: all 0.5s;
}
.slds-transition-show {
    transition: all 0.5s;
    animation: show 0.5s forwards;
}
@keyframes show {
    0% {
        transform: translateY(-50px);
    }
    25% {
        transform: translateY(-40px);
    }
    50% {
        transform: translateY(-20px);
    }
    75% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}
.slds-notify {
    pointer-events: all;
}

演示：

淡出过渡后 0.5 秒，元素将被删除。

附加信息：我正在使用 LWC OSS，它是在 Node JS 上开发的。

Answer 1

为了实现相同的目的，我在关闭时添加了另一个动画，所以基本上当我想隐藏时我添加了 slds-transition-hide。

我在 SLDS 库的过渡隐藏的原始淡出中添加了另一个动画，其中我减小了最大高度，以便其他元素可以向上滑动。

.slds-transition-hide {
    transition: all 0.5s;
    animation: hide 0.5s forwards;
}
.slds-transition-show {
    transition: all 0.5s;
    animation: show 0.5s forwards;
}
@keyframes hide {
    0% {
        max-height: 150px;
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(-20px);
    }
    75% {
        transform: translateY(-40px);
    }
    100% {
        max-height: 0px;
        padding: 0px;
        transform: translateY(-50px);
    }
}