От автора: Небольшая коллекция вдохновляющих эффектов для диалоговых окон с использованием CSS анимаций. Некоторые эффекты используют SVG анимации, трансформирующие SVG пути с помощью Snap.svg.
В прошлом году мы создали коллекцию вдохновляющих эффектов для модальных окон, а сегодня мы бы хотели поделиться с вами новыми идеями. Стили и тренды меняются, а это требует создания различных эффектов, которые будут удовлетворять требованиям современного пользовательского интерфейса (UI). Эта новая коллекция содержит несколько изящных анимаций и некоторые классные техники по трансформации SVG для диалоговых окон.
Пожалуйста, обратите внимание на то, что данные эффекты были протестированы лишь в последних версиях браузеров.
А также, пожалуйста, обратите внимание на то, что IE11, кажется, не поддерживает использование единиц измерения области просмотра (viewport) в функции calc(), которую мы используем в некоторых анимационных трансформациях.
Для диалогового окна мы используем следующую разметку:
|
1 2 3 4 5 6 7 |
<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 не поддерживают его).
Как вы могли заметить, у нас есть основной блок-обертка для диалогового окна, в котором размещены блок с подложкой (слой с затемнением) и блок с контентом. Базовые стили для диалогового окна выглядят следующим образом (вендорные префиксы опущены):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
.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; } /* Контент */ .dialog h2 { margin: 0; font-weight: 400; font-size: 2em; padding: 0 0 2em; margin: 0; } |
Мы используем модуль flexbox для главного диалогового элемента, чтобы отцентрировать контент в диалоговом окне. Подложка появится вместе с переходом. Обратите внимание на то, что свойство pointer-events не работает в IE < 11.
Некоторые эффекты имеют дополнительное разделение для внутреннего контента, чтобы их можно было изначально скрыть и растворить после завершения эффекта модального окна. Таким образом стоит поступать с эффектами, которые масштабируют/искажают диалоговое окно.
Пример эффекта под названием Sandra:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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 мы можем контролировать появление диалогового окна и расположенных в нем элементов.
Скрипт для диалогового окна будет следующим:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
;( 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-функция при открытии this.options.onOpenDialog( this ); } this.isOpen = !this.isOpen; }; // добавление к глобальному пространству имен window.DialogFx = DialogFx; })( window ); |
А вызвать диалоговое окно можно вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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-dialog=»somedialog».
Для SVG эффектов (за исключением рисования линии в примере под названием Wilma) мы используем Snap.svg для трансформации SVG путей. Мы добавляем SVG фигуру внутри обертки прямо в контент диалогового окна, а затем определяем путь, который нужно изменить в data-morph-open.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
(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 при работе с эффектами, использующими перспективу.
Мы надеемся, что вам понравились данные эффекты и они вдохновили вас на создание чего-нибудь похожего!
Посмотрите репозиторий на Github
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.
