jQuery和CSS3微软Xbox One样式的消息框特效

这是一款仿照微软Xbox One样式的消息框制作的jQuery和CSS3通知消息框特效。该消息框分为三个部分，每个部分在消息框被激活时将依次打开，再依次关闭，效果非常的酷。

制作方法

HTML结构

该消息框的HTML结构如下，主要结构分为三个部分：div.impact，div.message-container和一个<h1>标签。

<div class="pull">
  <div class="notification positive">
  <div class="flex-container">
      <div class="impact">
        <div class="icon">
          <i class="fa fa-gamepad"></i>
        </div>
      </div>
      <div class="message-container">
        <div class="message">
          <strong>jQueryScript is online</strong>
        </div>
      </div>
    </div>
    <h1>Hold <img src="xbox.png" alt="" class="xbox-logo"> to launch</h1>
  </div>
</div>               
              

CSS样式

该消息框的包裹容器被制作为3D空间。

.pull {
  position: fixed;
  bottom: 0;
  width: 100%;
  -webkit-perspective: 250px;
          perspective: 250px;
  -webkit-perspective-origin: right center;
          perspective-origin: right center;
  -webkit-transition: -webkit-perspective .1s ease;
          transition: perspective .1s ease;
}
.pull.open {
  -webkit-perspective: 500px;
          perspective: 500px;
}              
              

消息框的布局采用flexbox的布局方式。

.notification .flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: no-wrap;
      -ms-flex-wrap: no-wrap;
          flex-wrap: no-wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-transition: -webkit-transform .35s ease;
          transition: transform .35s ease;
  -webkit-transform: translate3d(0, 45px, 0);
          transform: translate3d(0, 45px, 0);
}
.notification .flex-container.drop-down {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}                
              

其中transform: translate3d(0, 0, 0);用于性能优化，开启GPU。

JAVASCRIPT

核心的jQuery代码如下，有两个函数：openNotification()和closeNotification()分别用于打开和关闭消息框：

$(function () {
    $('.notification').addClass('notification-hidden');
    openNotification('positive');
    setTimeout(closeNotification, 10000);
});
$('.again').click(function () {
    openNotification('positive');
    setTimeout(closeNotification, 10000);
});
function openNotification(whichNotification) {
    var thisNotification = $('.notification.' + whichNotification);
    thisNotification.removeClass('notification-hidden');
    setTimeout(function () {
        thisNotification.addClass('open');
        var openNotification = $('.notification.open');
        $('.pull').addClass('open');
        openNotification.addClass('show').addClass('open--rot');
        setTimeout(function () {
            openNotification.addClass('open--width');
        }, 1250);
        setTimeout(function () {
            openNotification.find('.flex-container').addClass('drop-down');
        }, 3000);
        $('body').append('<div class="overlay"></div>');
    }, 50);
}
function closeNotification() {
    var type = $('.notification.open');
    type.find('.drop-down').removeClass('drop-down');
    setTimeout(function () {
        type.removeClass('open--width');
    }, 400);
    setTimeout(function () {
        type.removeClass('open--rot');
    }, 700);
    setTimeout(function () {
        type.removeClass('show');
    }, 900);
    setTimeout(function () {
        $('.overlay').remove();
        type.removeClass('open');
    }, 1000);
    setTimeout(function () {
        type.addClass('notification-hidden');
    }, 1050);
}