15种移动手机APP打开菜单过渡动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一组移动手机（Mobile）APP打开菜单时的过渡动画特效。这组过渡动画共有15种效果，分别使用CSS3 animation动画来制作，这些动画均由线条和文字组成，效果非常炫酷。

这15种移动手机APP打开菜单动画效果所需的CSS动画样式都写在各自的页面中，同时使用少量的JavaScript代码来为元素切换相应的class类。

使用方法

HTML结构

所有的例子都使用相同的HTML结构：其中，.mobile-inner-header-icon是汉堡包图标，.mobile-inner-header-icon-out class类用于制作图标的动画效果。两个空的<span>元素用于制作汉堡包图标的线条。

<div class="mobile">
      <div class="mobile-inner">
          <div class="mobile-inner-header">
            <div class="mobile-inner-header-icon mobile-inner-header-icon-out">
              <span></span><span></span>
            </div>
          </div>
          <div class="mobile-inner-nav">
            <a href="#">Home</a>
            <a href="#">Services</a>
            <a href="#">Portfolio</a>
            <a href="#">Blog</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
          </div>
          <img src="_assets/photo1.jpg"/>
          <p>......</p> 
          <p>......</p>
        </div>
      </div>
  </div>
</div>

CSS样式

以第一种动画的CSS样式为例子，在第一种APP导航菜单特效中，首先为导航项添加一些通用的样式：

.mobile-inner-nav a{
  display: inline-block;
  line-height: 50px;
  text-decoration: none;
  width: 80%;
  margin-left: 10%;
  color: #FFFFFF;
  border-bottom: solid 1px rgba(255,255,255,0.3);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  font-weight:300;
}
.mobile-inner-nav a:hover{
  color: rgba(255,255,255,0.4);
  border-bottom: solid 1px rgba(255,255,255,0.2);
}

变为各个导航项设置animation动画：动画的持续时间animation-duration为0.5秒，填充模式animation-fill-mode为both，动画名称为returnToNormal。

.mobile-inner-nav a{
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: returnToNormal;
    animation-name: returnToNormal;
  }

returnToNormal帧动画第0帧时元素的透明度设置为0，通过translate3d()函数将元素在Y轴方向上压缩为负值。然后在第100帧的时候，元素的透明度恢复为1，transform属性设置为none，也就是恢复translate3d()为默认值(0,0,0)，这样，整个动画的效果就是菜单项由上往下依次展开。

@-webkit-keyframes returnToNormal {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes returnToNormal {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

JavaScript

第一种动画过渡效果的实现需要一些JavaScript代码的辅助。下面的第一段代码用于在点击汉堡包按钮之后，使菜单面板滑动显示。第二段代码用于为各个菜单项设置动画的延迟时间。

$(".mobile-inner-header-icon").click(function(){
  $(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
  $(".mobile-inner-nav").slideToggle(250);
});

$(".mobile-inner-nav a").each(function( index ) {
  $( this ).css({'animation-delay': (index/10)+'s'});
});

其它效果的实现请参考下载文件。