Popup open and close animation

Popup animations can be configured by assigning values to `awe.openAnim`, `awe.closeAnim` and `awe.modalOpenAnim`, `awe.modalCloseAnim`.

Shared/Demos/PopupAnimation.cshtml

@(Html.Awe().InitPopup(new PopupOpt
{
    Name = "popupAnim",
    Url = Url.Action("Popup1", "PopupDemo"),
    OutClickClose = true,
    LoadOnce = true,
    Title = "popup slide in animation"
}))

<div class="btn-cont">
    <button type="button" class="awe-btn" onclick="openPopSlide('right')">slide from right</button>
    <button type="button" class="awe-btn" onclick="openPopSlide('left')">slide from left</button>
    <button type="button" class="awe-btn" onclick="openPopSlide('top')">slide from top</button>
    <button type="button" class="awe-btn" onclick="openPopSlide('bottom')">slide from bottom</button>
    <button type="button" class="awe-btn" onclick="openPopSlide('top', 1500)">custom time</button>
</div>
<br />
<div class="btn-cont">
    <button type="button" class="awe-btn awe-btnp" onclick="openFadeIn()">fade in & fade out on close</button>
    <button type="button" class="awe-btn awe-btnp" onclick="openCloseSlide('top', 'bottom')">slide top to bottom</button>
    <button type="button" class="awe-btn awe-btnp" onclick="openCloseSlide('left', 'right')">left to right</button>
    <button type="button" class="awe-btn awe-btnp" onclick="openTransform('fade', 'scale')">fade and scale</button>
    <button type="button" class="awe-btn awe-btnp" onclick="openTransform('fade', 'scaleY')">fade and scaleY</button>
    <button type="button" class="awe-btn awe-btnp" onclick="slideFadeScale()">slide fade and scale</button>     
</div>
<div class="btn-cont">
<button type="button" class="awe-btn awe-btnp" onclick="modalFade()">modal fade</button>
</div>
<div>
    
</div>
<script>
    function openPopSlide(dir, time) {
        awe.open({id:'popupAnim', openAnim: (opt) => awe.anim({ opt, type: 'slide', dir, time }) });
    }

    function openFadeIn() {
        awe.open({
            id:'popupAnim',
            openAnim: (opt) => awe.anim({ opt, type: 'fade' }),
            closeAnim: (opt) => awe.anim({ opt, type: 'fade', out: 1})
        });
    }

    function openTransform() {
        awe.open({
            id:'popupAnim',
            openAnim: (opt) => awe.anim({ opt, type: [...arguments] }),
            closeAnim: (opt) => awe.anim({ opt, type: [...arguments], out: 1})
        });
    }

    function slideFadeScale() {
        awe.open({
            id:'popupAnim',
            openAnim: (opt) => awe.anim({ opt, type: ['fade', 'scaleY', 'slide'], dir: 'left' }),
            closeAnim: (opt) => awe.anim({ opt, type: ['fade', 'scaleY', 'slide'], dir: 'right', out: 1})
        });
    }

    function openCloseSlide(from, to) {
        awe.open({
            id:'popupAnim',
            openAnim: (opt) => awe.anim({ opt, type: 'slide', dir: from }),
            closeAnim: (opt) => awe.anim({ opt, type: 'slide', dir: to, out: 1})
        });
    }

    function modalFade(){
        awe.open({
            id: 'popupAnim',
            modal: 1,
            openAnim: (opt) => awe.anim({ opt, type: ['fade', 'slide'], dir: 'top' }),                
            closeAnim: (opt) => awe.anim({ opt, type: ['fade', 'slide'], dir: 'bottom', out: 1 }),                
            modalOpenAnim: (opt) => awe.anim({ opt, type: ['fade'] }),
            modalCloseAnim: (opt) => awe.anim({ opt, type: ['fade'], out: 1 }),
        });
    }
</script>

Set open animation globally for Dropdown and DropMenu popups

Popup animation can be set globally by setting `awe.openAnim`, `awe.closeAnim`, `awe.modalOpenAnim`, `awe.modalCloseAnim`.

PopupDemo/Animation.cshtml

<button type="button" class="awe-btn" onclick="awe.open({id: 'dropdownAnim'}, this)">
    open dropdown
</button>

<button type="button" id="btnMenu1" class="awe-btn awe-btnp">
    open menu
</button>

<button type="button" id="btnHovMenu1" class="awe-btn awe-btnp">
    hover me
</button>

@(Html.Awe().InitPopupForm(new PopupFormOpt
{
    Name = "dropdownAnim",
    Url = Url.Action("Create", "DinnersGridCrud"),
    OutClickClose = true,
    Dropdown = true,
    Modal = true
}))

<script>
    $(function(){
        // set open/close animation globally
        awe.openAnim = (opt) =>
            (opt.isDropMenu || opt.isDropDown) && awe.anim({ opt, type: 'fade' });

        awe.closeAnim = (opt) =>
            (opt.isDropMenu || opt.isDropDown) && awe.anim({ opt, type: 'fade', out: 1});

        awe.modalOpenAnim = (opt) => opt.isDropDown && awe.anim({ opt, type: ['fade'] });
        awe.modalCloseAnim = (opt) => opt.isDropDown && awe.anim({ opt, type: ['fade'], out: 1 });

        $.when(awe.dropmenu()).then(init);

        function init(){
            const dropMenu1 = awe.dropmenu({
                id: 'dropMenu1',
                dataFunc: () => [
                    { k: 1, c: 'item 1' },
                    { k: 2, c: 'item 2' },
                    { k: 3, c: 'item 3' }]
            });

            $('#btnMenu1').on('click', (e) => {
                hovApi.stopClose(); // prevent close after cursor left hover area
                dropMenu1.open({ opener: $(e.target) });
            });

            var hovApi = awe.hovOpen({
                hover: $('#btnHovMenu1'),
                open: (opener) => {
                    dropMenu1.open({opener});
                    return dropMenu1.cont;
                },
                close: () => dropMenu1.close()
            });
        }            
    });
</script>

Comments