DialogEffects 简单漂亮的弹窗动画效果

发布于 2020-09-13 12:24:52 字数 7376 浏览 1866 评论 0

这组新模态窗口效果包含了一些微妙的动画，还有一些应用了SVG变形技术，一个小集合的对话框效果使用CSS动画为您的灵感。有些效果在 Snap.svg 的帮助下使用变形路径的 SVG 动画。风格和趋势的变化，这需要不同的效果，以适应现代用户界面。这套新的包含一些微妙的动画和一些更花哨的SVG变形技术的对话框。

请注意，这只在最新的浏览器版本中进行了测试。

还请注意，IE11似乎不支持calc()中的vieport单元，我们在一些动画转换中使用它。

对于对话框，我们使用以下标记：

<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都不支持它。

如您所见，我们有一个主对话框包装，其中包含覆盖和对话框内容。对话框的基本样式如下(省略供应商前缀)：

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

我们在主对话框元素上使用Flexbox来对对话框内容进行居中。覆盖将与过渡出现。请注意，指针事件不适用于IE<11。
一些影响有一个额外的内部内容划分，以隐藏它的最初和淡入后，一个模式的效果是完成。这对于缩放/扭曲对话框的效果是有意义的。

效果(Sandra)的一个例子是：

.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类，我们可以控制对话框及其内部元素的出现。

对话框的脚本如下：

;( 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-dialog="somedialog".

对于SVG效应(除了Wilma的线条绘制)，我们使用 Snap.svg 改变SVG路径。我们将svg形状直接添加到对话框内容的包装中，然后定义变形到in的路径。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中似乎存在某种具有透视效果的堆叠问题。