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

当前位置:主页 > CSS3库 > UI界面设计 > 15种移动手机APP打开菜单过渡动画特效
15种移动手机APP打开菜单过渡动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-03-22
    阅读:
简要教程

这是一组移动手机(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-modeboth,动画名称为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'});
});
                

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

网友评论