这是一款html5 svg和css3超酷模态窗口动画特效插件。它和19种基于css3的超华丽模态窗口效果有异曲同工之妙。在这款插件中包含了一些有趣的动画效果和SVG变形技术。
注意:似乎IE11不支持在transform中使用calc()。
HTML
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都不支持它。
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 );
我们也能够想下面这样调用模态窗口:
<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效果
插件中的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。