当前位置:主页 > 网页特效 > TAB标签 >

支持键盘控制的扁平风格水平滑动Tab选项卡

发布时间:2018/07/07 来源:互联网 浏览: 关键词:选项卡 tab 扁平化 
支持键盘控制的扁平风格水平滑动Tab选项卡 支持键盘控制的扁平风格水平滑动Tab选项卡
阿里云

简要教程

这是一款非常实用的支持键盘控制的扁平风格水平滑动选项卡UI设计效果。该Tab选项卡采用全屏设计,每一个Tab一种颜色,点击相应的Tab时会滑出相应颜色的选项卡内容。你还可以使用键盘的左右方向键来控制选项卡的切换。

制作方法

HTML结构

选项卡由一个<nav>元素组成,它的里面是一个无序列表。div.burger是一个关闭按钮,可以隐藏和显示选项卡。

<navclass="nav nav--active">
  <ulclass="nav__list">
    <liclass="nav__item">
      <ahref=""class="nav__link">
        <divclass="nav__thumb color1"data-letter="a"></div>
        <pclass="nav__label">About</p>
      </a>
    </li>
    ......
  </ul>
  <divclass="burger burger--close">
    <divclass="burger__patty"></div>
  </div>
</nav>    

每一个<section class="section">都使用绝对定位使它们堆叠在一起。隐藏的section会被使用translate:100%;移动到屏幕之外,在相应选项卡被点击的时候才被移动会原来的位置。当一个新的选项卡被移动到屏幕中,原来的选项卡被使用translate:-100%;移动到屏幕屏幕左边。当过渡动画完成之后,移动到屏幕左边的section会被重置回屏幕的右边,这样可以保证在下一次移动时处于正确的位置。

<divclass="page">
  <sectionclass="section color2"data-letter="p">
    <articleclass="section__wrapper">
      <h1class="section__title">...</h1>
      <p>...</p>
    </article>
  </section>
  ...
</div>    

CSS样式

<nav>元素使用position: fixed将其固定在屏幕的上方。每一个section都使用position: absolute使它们堆叠在一起,然后使用transform: translateX(100%) 将它们移动并隐藏。

.nav {
  will-change: transform;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1;
  background:#1a1a1a;
  -webkit-transform:translateY(-100%);
      -ms-transform:translateY(-100%);
          transform:translateY(-100%);
  -webkit-transition:all0.45s cubic-bezier(0.23,1,0.32,1);
          transition:all0.45s cubic-bezier(0.23,1,0.32,1);
}
.nav--active {
  -webkit-transform:translateY(0);
      -ms-transform:translateY(0);
          transform:translateY(0);
}
.section {
  will-change: transform;
  position:absolute;
  width:100%;
  top:0;
  left:0;
  height:100vh;
  overflow:hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  text-align:center;
  background:#fff;
  -webkit-transform:translateX(100%);
      -ms-transform:translateX(100%);
          transform:translateX(100%);
  -webkit-transition:all0.7s cubic-bezier(0.23,1,0.32,1);
          transition:all0.7s cubic-bezier(0.23,1,0.32,1);
}
.section--hidden{
  -webkit-transform:translateX(-100%);
      -ms-transform:translateX(-100%);
          transform:translateX(-100%);
}
.section--active {
  -webkit-transform:translateX(0)rotateY(0);
          transform:translateX(0)rotateY(0);
  z-index:2;
}        

JAVASCRIPT

这个TAB选项卡的jQuery代码中主要使用.eq()和.index()方法来在点击Tab的时候隐藏和显示正确的选项卡内容。当用户点击某个Tab时,代码中保存列表项的索引序号,然后使用这个值来选择正确的section。然后在原来的选项卡上添加class来隐藏它,并在当前激活的选项卡上添加class来将它移动会屏幕中。

当过渡动画完成之后(使用transitionend事件),代码中重置隐藏section的位置,使它们在下一次动画之前处于正确的位置之上。

具体实现代码前参考下载文件。

共有人阅读,期待你的评论!评论
Top