基于svg mask实现的tab切换效果

来源：互联网发布：皮影客软件介绍编辑：程序博客网时间：2024/05/16 15:31

效果

tab切换效果

第一次看到这个效果是在阿里妈妈MUX的博客：UI动效—细微交互，极致体验，里面搜集的一些微交互都让人眼前一亮，恰好自己最近要做一个按钮组，就参考了里面Sergey Valiukh的一个设计。

源码

和上两篇博客一样，相对简单，为了节省你的阅读时间，直接上源码：

上两篇博客：
D3.js SVG绘图实践：趋势缩略图
D3.js SVG绘图实践：波浪动画

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>transition-tabs</title>    <link rel="stylesheet" href="transition-tabs.css">  </head>  <body>    <div class="transition-tabs">      <svg width="100%" height="100%">        <defs>          <mask id="mask">            <rect x="0" y="0" width="33.33%" height="100%" fill="white"  />          </mask>        </defs>        <!-- 背景 -->        <rect x="0" y="0" width="100%" height="100%" fill="#5d5070"/>        <!-- 顶层遮罩 -->        <g mask="url(#mask)">          <rect x="0" y="0" width="33.33%" height="100%" fill="#75adcc"/>          <rect x="33.33%" y="0" width="33.33%" height="100%" fill="#f3b16d"/>          <rect x="66.66%" y="0" width="33.33%" height="100%" fill="#e55b56"/>        </g>      </svg>      <!-- 底层的文字，点击文字切换动画 -->      <div>        <span>前85%</span>        <span>85%~95%</span>        <span>后5%</span>      </div>    </div>    <script src="transition-tabs.js"></script>  </body></html>

.transition-tabs {  position: relative;  width: 300px;  height: 30px;}.transition-tabs div{  position: absolute;  width: 100%;  left: 0;  top: 0;  display: flex;  text-align: center;}.transition-tabs div span{  flex: 1;  color: white;  line-height: 30px;  cursor: pointer;}.transition-tabs #mask rect {  position: absolute;  transition: transform 0.4s ease-in-out 0.1s;  transform: translate3d(0,0,0);}

;(function(){  var mask = document.querySelector("#mask rect");  var handleClick = function(e){    console.log("click",e);  };  //事件代理  document.querySelector(".transition-tabs div").addEventListener("click", function(e){    var target = e.target;    if (target.nodeName.toLowerCase() == "span") {      var end = target.offsetLeft;      mask.style.transform = "translateX(" + end + "px)";      if (handleClick) {        handleClick(e);              }    }  });})();

为了避免大家复制粘贴的麻烦，已将该项目上传到github，随意使用：

transition-tabs

实现

①mask(遮罩)

之前没接触过的知识点只有一个，就是svg的mask，作用和css中的mask一样，使用mask层来控制显示哪一部分，区别在于svg mask显示mask区域为白色的部分，css mask显示mask区域为黑色的部分。

盗图一张：
mask作用

但是css中的mask兼容性可谓惨不忍睹：
css mask兼容性

于是使用了SVG mask。

②移动遮罩

移动遮罩就使用了css中简单的translate3D()，比较简单，就不说了，在绑定点击事件的时候用了事件代理的方法，让父级捕获并处理三个子级（这里指span）的点击事件，既避免全局事件代理可能带来的性能问题，又减少事件绑定次数。

总结

一个比较简单的东西好像没有必要写，当做每周的一个记录好了。

昨天面试官问了一些移动端的事件，感觉自己了解得不多，还是要稳扎稳打，扩大知识面广度同时确保深度。这周正好发烧，刚退烧，休息之余打算看看zepto的源码，向优秀的人看齐，你才会更加优秀，加油。

0 0