Анимация

Если вам нужно изменить анимацию показа или скрытия модального окна, вам нужно переопределить некоторые свойства и стили. По умолчанию для анимации модальных окон используется modal-list в качестве имени анимации. Чтобы переопределить имя анимации, вам нужно указать новые в конфигурации:

import {config} from "jenesius-vue-modal";

config({
    animation: "fade" // Любая другая
})

При изменении анимации необходимо учитывать, что мы должны анимировать как .modal-container, так и само модальное окно .modal-item.

Например, изменим анимацию и продолжительность появления модальное окно:

Вместо fade вы можете использовать modal-list. В таком случае вам не нужно переопределять имя в конфигурации.

css

/* Не забудьте указать время анимации для стартового блока. */
.fade-enter-active, 
.fade-leave-active,
.fade-enter-active .modal-item,
.fade-leave-active .modal-item{
    transition: 1.2s;
}

.fade-enter-from .modal-item,
.fade-leave-to .modal-item{
    transform: translateX(100px);
}

Анимация ​

Анимация