CSS animations for enter and leave

[Tobias Vogler]

Describe the bug
The animation-name attribute does not work, the notifications simply appear and disappear without any animation (although there seems to be a delay when I click on it, before it goes away). If I manually add the animation-name: CSS property, the animation works for enter, but not for leave.

To Reproduce

1. Use CSS animation (default), add animation-name="examplename" attribute
2. Add some @keyframes examplename
3. Reload and trigger a notification with $notify

Expected behavior
The animation-name attribute creates the appropriate CSS property, and preferably reverse the animation on leave or provide additional configuration for a leave animation.

Screenshots
n/a

Desktop (please complete the following information):

• OS: macOS 11
• Browser: Firefox / Chrome
• Version 93 / 95

Additional context
n/a

[Tobias Vogler]

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?

[Evgeny Kirpichyov]

@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

[Tobias Vogler]

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