Animate DOM Element on removal of Element

Question

I have to animate the Toast Notifications, I am currently using the transition to show it coming from the top. It looks good to me, I want to stop the sudden moving of the other toast notifications so harshly, any way they can cover space smoothly ?

Current 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;
}

Demo:

The elements are removed 0.5s after the fade out transition.

Additional Info: I am using LWC OSS, which is developed on Node JS.

score 2 · Answer 1 · answered Feb 07 '22 at 08:11

In order to achieve the same, I added another animation on closing, so basically whenI want to hide I am adding slds-transition-hide.

I have added another animation to the original fadeout of transition-hide of SLDS lib where I am dereasing the max-height so the other elements can slide up.

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

Animate DOM Element on removal of Element

1 Answers1