.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s
}

.fade-enter,
.fade-leave-active,
.fade-leave-to {
    opacity: 0
}

.list-complete-enter,
.list-complete-leave-active {
    opacity: 0;
}

.fade-down-enter-active,
.fade-down-leave-active,
.fade-up-enter-active,
.fade-up-leave-active {
    transition: opacity .3s, transform .3s;
}

.fade-down-enter,
.fade-down-leave-active,
.fade-down-leave-to,
.fade-up-enter,
.fade-up-leave-active,
.fade-up-leave-to {
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--size-xxl));
}
.fade-up-enter,
.fade-up-leave-active,
.fade-up-leave-to {
    transform: translateY(calc(-1 * var(--size-xxl)));
}