How is the mage.modal UI widget's animation implemented?

dmitry_fedyuk · April 21, 2016, 8:16am

The animation is implemented using the CSS transitions.

magento/magento2/blob/c3199e7b/app/code/Magento/Ui/view/base/web/js/modal/modal.js#L10-L12


'text!ui/template/modal/modal-popup.html',
'text!ui/template/modal/modal-slide.html',
'text!ui/template/modal/modal-custom.html',

github.com

magento/magento2/blob/c3199e7b/app/code/Magento/Ui/view/base/web/js/modal/modal.js#L16-L16


], function ($, _, template, popupTpl, slideTpl, customTpl, keyCodes) {

github.com

magento/magento2/blob/c3199e7b/app/code/Magento/Ui/view/base/web/js/modal/modal.js#L52-L54


popupTpl: popupTpl,
slideTpl: slideTpl,
customTpl: customTpl,

github.com

magento/magento2/blob/c3199e7b/app/code/Magento/Ui/view/base/web/js/modal/modal.js#L369-L374


/**
 * Compile template and append to wrapper.
 */
_renderModal: function () {
    $(template(
        this.options[this.options.type + 'Tpl'],

.lib-modal()

github.com

magento/magento2/blob/c3199e7b/lib/web/css/source/components/_modals.less#L52-L59


&._show {
    visibility: visible;


    .modal-inner-wrap {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}

.lib-modal-slide()

github.com

magento/magento2/blob/c3199e7b/lib/web/css/source/components/_modals.less#L73-L91


&._show {
    .modal-inner-wrap {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}


.modal-inner-wrap {
    height: 100%;
    overflow-y: auto;
    position: static;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    transition-duration: .3s;
    -webkit-transition-property: -webkit-transform, visibility;
            transition-property:         transform, visibility;
    transition-timing-function: ease-in-out;
    width: auto;
}

.lib-modal-popup()

github.com

magento/magento2/blob/c3199e7b/lib/web/css/source/components/_modals.less#L99-L104


&._show {
    .modal-inner-wrap {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

github.com

magento/magento2/blob/c3199e7b/lib/web/css/source/components/_modals.less#L116-L121


-webkit-transform: translateY(-200%);
        transform: translateY(-200%);
transition-duration: .2s;
-webkit-transition-property: -webkit-transform, visibility;
        transition-property:         transform, visibility;
transition-timing-function: ease;

Magento_Customer/js/model/authentication-popup.js

github.com

magento/magento2/blob/c3199e7b/app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js#L10-L10


'Magento_Ui/js/modal/modal'

github.com

magento/magento2/blob/c3199e7b/app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js#L28-L28


modal(options, $(this.modalWindow));

dmitry_fedyuk · April 21, 2016, 8:42am