移除元素时为 DOM 元素设置动画答案

【问题标题】：Animate DOM Element on removal of Element移除元素时为 DOM 元素设置动画
【发布时间】：2022-02-07 16:11:48
【问题描述】：

我必须为 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 秒被移除。

附加信息：我使用的是基于 Node JS 开发的 LWC OSS。

【问题讨论】：

标签： css animation dom salesforce-lightning lwc

【解决方案1】：

为了达到同样的效果，我在关闭时添加了另一个动画，所以基本上当我想隐藏时，我添加了 slds-transition-hide。

我在 SLDS lib 的 transition-hide 的原始淡出中添加了另一个动画，我正在降低最大高度，以便其他元素可以向上滑动。

.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);
    }
}

【讨论】：