转载

15种移动手机APP打开菜单过渡动画特效

简要教程

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

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

查看演示 下载插件

使用方法

HTML结构

所有的例子都使用相同的HTML结构：其中，.mobile-inner-header-icon是汉堡包图标，.mobile-inner-header-icon-outclass类用于制作图标的动画效果。两个空的<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'}); });

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

来源：jQuery之家

原文 http://www.html5cn.org/article-9468-1.html

正文到此结束