Skip to content


If you need to change the animation of showing and hiding the modal, you need to override some properties and styles. Default for animating modal windows uses modal-list as the animation name. To override the animation name, you need to specify a new one in the configuration:

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

    animation: "fade" // Any name

When changing the animation, it is necessary to take into account that we must animate both the .modal-container and the modal window itself .modal-item.

For example, let's change the animation and the length of the appearance of the modal window:

Instead of fade, you can use modal-list. In this case, you do not need to redefine the name in the configuration.

/* Don't forget to include the animation time for the start block */
.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);

Released under the MIT License.