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

2019-10-10 16:29:15 作者: 大梦 浏览: 96 [百度已收录] [搜狗已收录] [360已收录]


简要教程

这是一款html5 svg和css3超酷模态窗口动画特效插件。它和19种基于css3的超华丽模态窗口效果有异曲同工之妙。在这款插件中包含了一些有趣的动画效果和SVG变形技术。

HTML

html结构相当简单:

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

CSS样式

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

.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 );

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



    (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) );
    })();

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

SVG效果

插件中的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

版权免责声明 1、本网站名称:罗网云集-支付之家!
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站Potato土豆群:请先加好友啦你进群:dizhus —potato是一款不用翻墙的聊天软件
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的