CSS animations for enter and leave
tobiv opened this issue · comments
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
- Use CSS animation (default), add
animation-name="examplename"
attribute - Add some
@keyframes examplename
- 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
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, 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
Thank you! I didn't think of Vue native transitions… :)