html5 svg和css3超酷模态窗口动画特效

PetitQ 对话框/Tips 2022-1-29 809 0 0

这是一款使用 html5 svg 和 css3 制作的超酷模态窗口动画特效插件。该模态窗口特效共分 6 大类 17 种不同的效果。最后 5 种效果使用 html5 svg 和 js 制作，其余特效使用 css3 和 js 制作而成。

注意：似乎 IE11 不支持在 transform 中使用 calc()

section

html 结构相当简单：

也想出现在这里？联系我们吧

```
<div id="somedialog" class="dialog">
```
```
    <div class="dialog__overlay"></div>
```
```
    <div class="dialog__content">
```

        <h2><strong>Howdy</strong>, I'm a dialog box</h2><

        div><button class="action" data-dialog-close>Close</button></div>

```
    </div>
```
```
</div>
```

在不久的将来，也许我们就能直接使用<dialog>标签，现在它还比较弱，IE、Firefox 和 Safari 都不支持它。

section

下面是模态窗口的基本样式：

```
.dialog,
```
```
.dialog__overlay {
```
```
    width: 100%;
```
```
    height: 100%;
```
```
    top: 0;
```
```
    left: 0;
```
```
}
```
```
.dialog {
```
```
    position: fixed;
```
```
    display: flex;
```
```
    align-items: center;
```
```
    justify-content: center;
```
```
    pointer-events: none;
```
```
}
```
```
.dialog__overlay {
```
```
    position: absolute;
```
```
    z-index: 1;
```
```
    background: rgba(55, 58, 71, 0.9);
```
```
    opacity: 0;
```
```
    transition: opacity 0.3s;
```
```
}
```
```
.dialog--open .dialog__overlay {
```
```
    opacity: 1;
```
```
    pointer-events: auto;
```
```
}
```
```
.dialog__content {
```
```
    width: 50%;
```
```
    max-width: 560px;
```
```
    min-width: 290px;
```
```
    background: #fff;
```
```
    padding: 4em;
```
```
    text-align: center;
```
```
    position: relative;
```
```
    z-index: 5;
```
```
    opacity: 0;
```
```
}
```
```
.dialog--open .dialog__content {
```
```
    pointer-events: auto;
```
```
}
```
```
/* Content */
```
```
.dialog h2 {
```
```
    margin: 0;
```
```
    font-weight: 400;
```
```
    font-size: 2em;
```
```
    padding: 0 0 2em;
```
```
    margin: 0;
```
```
}
```

我们在.dialog 上使用 flexbox 是为了让对话框的内容居中。注意：IE11 以下的 IE 浏览器不支持 pointer 事件。

某些效果中有一些额外的 div,在开始时他们是隐藏的，模态窗口动画结束后它们以 fade in 的方式出现，这是为了制作缩放和扭曲的效果。

下面是 Sandra 模态窗口动画效果的 css 代码：

```
.dialog.dialog--open .dialog__content,
```

.dialog.dialog--close .dialog__content {

```
    animation-duration: 0.3s;
```
```
    animation-fill-mode: forwards;
```
```
}
```
```
 
```
```
.dialog.dialog--open .dialog__content {
```
```
    animation-name: anim-open;
```
```
}
```
```
 
```

.dialog.dialog--close .dialog__content {

```
    animation-name: anim-close;
```
```
}
```
```
 
```
```
@keyframes anim-open {
```

    0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }

    100% { opacity: 1; transform: scale3d(1, 1, 1); }

```
}
```
```
 
```
```
@keyframes anim-close {
```
```
    0% { opacity: 1; }
```

    100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }

```
}
```

通过添加 dialog--open 和 dialog--close 类，我们可以很好的控制模态窗口和它里面的内容。

下面是控制模态窗口的 js 代码：

```
( function( window ) { 
```
```
    'use strict';
```

    var support = { animations : Modernizr.cssanimations },

        animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },

        animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],

        onEndAnimation = function( el, callback ) {

            var onEndCallbackFn = function( ev ) {

                if( support.animations ) {

                    if( ev.target != this ) return;

                    this.removeEventListener( animEndEventName, onEndCallbackFn );

```
                }
```

                if( callback && typeof callback === 'function' ) { callback.call(); }

```
            };
```
```
            if( support.animations ) {
```

                el.addEventListener( animEndEventName, onEndCallbackFn );

```
            }
```
```
            else {
```
```
                onEndCallbackFn();
```
```
            }
```
```
        };
```
```
    function extend( a, b ) {
```
```
        for( var key in b ) { 
```

            if( b.hasOwnProperty( key ) ) {

```
                a[key] = b[key];
```
```
            }
```
```
        }
```
```
        return a;
```
```
    }
```
```
    function DialogFx( el, options ) {
```
```
        this.el = el;
```

        this.options = extend( {}, this.options );

        extend( this.options, options );

        this.ctrlClose = this.el.querySelector( '[data-dialog-close]' );

```
        this.isOpen = false;
```
```
        this._initEvents();
```
```
    }
```
```
    DialogFx.prototype.options = {
```
```
        // callbacks
```

        onOpenDialog : function() { return false; },

        onCloseDialog : function() { return false; }

```
    }
```

    DialogFx.prototype._initEvents = function() {

```
        var self = this;
```
```
        // close action
```

        this.ctrlClose.addEventListener( 'click', this.toggle.bind(this) );

```
        // esc key closes dialog
```

        document.addEventListener( 'keydown', function( ev ) {

            var keyCode = ev.keyCode || ev.which;

            if( keyCode === 27 && self.isOpen ) {

```
                self.toggle();
```
```
            }
```
```
        } );
```

        this.el.querySelector( '.dialog__overlay' ).addEventListener( 'click', this.toggle.bind(this) );

```
    }
```

    DialogFx.prototype.toggle = function() {

```
        var self = this;
```
```
        if( this.isOpen ) {
```

            classie.remove( this.el, 'dialog--open' );

            classie.add( self.el, 'dialog--close' );

```
 
```

            onEndAnimation( this.el.querySelector( '.dialog__content' ), function() {

                classie.remove( self.el, 'dialog--close' );

```
            } );
```
```
            // callback on close
```

            this.options.onCloseDialog( this );

```
        }
```
```
        else {
```

            classie.add( this.el, 'dialog--open' );

```
 
```
```
            // callback on open
```

            this.options.onOpenDialog( this );

```
        }
```
```
        this.isOpen = !this.isOpen;
```
```
    };
```
```
    // add to global namespace
```
```
    window.DialogFx = DialogFx;
```
```
})( window );
```

我们也能够想下面这样调用模态窗口：

```
<script src="js/classie.js"></script>
```
```
<script src="js/dialogFx.js"></script>
```
```
<script>
```
```
    (function() {
```

        var dlgtrigger = document.querySelector( '[data-dialog]' ),

            somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),

            dlg = new DialogFx( somedialog );

        dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

```
    })();
```
```
</script>
```

以上是通过 data-属性的 data-dialog="somedialog"来触发控制按钮。

插件中的 SVG 效果（除了 Wilma 效果）都是使用 Snap.svg 来做路径变形动画。我们添加 SVG 图形到模态窗口的内容中，然后在 data-morph-open 中定义不同的路径变形动画。

```
(function() {
```

    var dlgtrigger = document.querySelector( '[data-dialog]' ),

        somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),

```
        // svg..
```

        morphEl = somedialog.querySelector( '.morph-shape' ),

        s = Snap( morphEl.querySelector( 'svg' ) ),

```
        path = s.select( 'path' ),
```
```
        initialPath = path.attr('d'),
```
```
        steps = { 
```

            open : morphEl.getAttribute( 'data-morph-open' )

```
        },
```

        dlg = new DialogFx( somedialog, {

            onOpenDialog : function( instance ) {

```
                // reset path
```

                morphEl.querySelector( 'svg > path' ).setAttribute( 'd', initialPath );

```
                // animate path
```

                path.stop().animate( { 'path' : steps.open }, 300, mina.easein );

```
            }
```
```
        } );
```

    dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

```
})();
```

在 Safari 浏览器中透视效果似乎有些问题，你想了解更多可以阅读：Weird CSS Rotation Animation Glitch in Safari。

html5 svg 和 css3 超酷模态窗口动画特效

已有 202 人购买

永久更新：
演示数据：
提取码：lwfr

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

html5 svg和css3超酷模态窗口动画特效

html5 svg 和 css3 超酷模态窗口动画特效

相关文章

跨浏览器响应式消息通知插件

纯CSS3背景透明Speech Bubbles对话气泡

仿Twitter顶部消息提示栏插件

发表回复取消回复

热销模板

对话框/Tips

html5 svg 和 css3 超酷模态窗口动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复