CSS animations for enter and leave about vue3-notification

[kyvg]

@tobiv, animation-name is prefix for transition classes. You can use it like:

<template>
    <notifications animation-name="my-animation"/>
</template>

<style>
    @keyframes examplename {
         ...
    }

    .my-animation-enter-from {
        animation: examplaname 1s;
    }

    .my-animation-leave-to {
        animation: examplaname reverse 1s;
    }
</style>

See more: https://v3.vuejs.org/guide/transitions-enterleave.html#transition-classes

[tobiv]

I have partly figured out that the animation-name attribute is not a @keyframe animation, but a CSS class name? Can you explain how to use these?

[tobiv]

Thank you! I didn't think of Vue native transitions… :)