tab效果实现

本文最后更新于：2024年3月11日 晚上

在网上看到了一个这样的Tab组件效果，非常喜欢，于是想着用代码把它实现出来
效果如图
先大概分析一下这个动效图有哪些抓人的点

  • 未激活前tab项目的图标是半透明
  • 当激活后，图标左移完全显示并显示对应的文案
  • 不同tab切换的时候，激活的背景会顺滑平

自己的代码实现如下

1
2
3
4
5
6
<nav id="tab">
  <a class="active"><svg t="1649231592227" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1698" width="32" height="32"><path d="M1014.613212 543.119765c-3.970428 3.806699-9.076726 5.699816-14.172791 5.699816-5.372358 0-10.744715-2.108011-14.766308-6.293333l-64.539922-67.24145 0 523.543917c0 11.307533-9.15859 20.466124-20.466124 20.466124l-265.261433 0c-11.307533 0-20.466124-9.15859-20.466124-20.466124 0-11.2973 9.15859-20.466124 20.466124-20.466124l244.795309 0 0-545.729196-367.233895-382.614188-367.223662 382.593721 0 545.749662 224.329185 0L370.07357 672.353105c0-11.307533 9.168824-20.466124 20.466124-20.466124l244.86694 0c11.2973 0 20.466124 9.15859 20.466124 20.466124 0 11.2973-9.168824 20.466124-20.466124 20.466124l-224.400816 0 0 306.009486c0 11.307533-9.15859 20.466124-20.466124 20.466124l-265.261433 0c-11.2973 0-20.466124-9.15859-20.466124-20.466124L104.812137 475.264331l-64.550155 67.251683c-7.828292 8.15575-20.783349 8.42181-28.939099 0.593518s-8.42181-20.783349-0.593518-28.939099L498.201739 6.293333c3.857864-4.021593 9.18929-6.293333 14.766308-6.293333 5.566786 0 10.898211 2.27174 14.756075 6.293333l487.482607 507.887332C1023.035022 522.336416 1022.768963 535.291472 1014.613212 543.119765z" p-id="1699"></path></svg></a>
  <a><svg t="1649231612539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1944" width="32" height="32"><path d="M961.870987 319.751465l0-150.640905L64.175625 169.110559l0 652.838655 897.695363 0 0-342.705246c0-11.307533 9.15859-20.466124 20.466124-20.466124 11.2973 0 20.466124 9.15859 20.466124 20.466124l0 363.17137c0 11.2973-9.168824 20.466124-20.466124 20.466124L43.709501 862.881462c-11.307533 0-20.466124-9.168824-20.466124-20.466124l0-693.770903c0-11.307533 9.15859-20.466124 20.466124-20.466124l938.62761 0c11.2973 0 20.466124 9.15859 20.466124 20.466124l0 182.025707c0 6.815219-3.40761 13.190417-9.066493 16.986883l-428.499238 287.589974c-6.753821 4.523013-15.533788 4.635577-22.379707 0.276293l-383.361201-243.587807c-9.537214-6.057973-12.361539-18.706037-6.293333-28.243251 6.057973-9.537214 18.706037-12.361539 28.243251-6.303566l372.074134 236.414431L961.870987 319.751465z" p-id="1945"></path></svg></a>
  <a><svg t="1649231635404" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2190" width="32" height="32"><path d="M936.723238 911.36571c0 11.307533-9.168824 20.466124-20.466124 20.466124l-778.24483 0c-5.638417 0-11.031241-2.322905-14.899338-6.436596-3.868097-4.103458-5.863545-9.629311-5.525853-15.257495 3.346211-55.688323 25.521257-99.3221 67.804269-133.37773 35.344996-28.478612 79.94068-46.01808 119.286804-61.490469 48.115857-18.920932 89.836051-35.32453 102.371552-64.120366 1.964748-23.300682 1.811252-41.382503 1.627057-62.186318-0.030699-3.121084-0.051165-6.2831-0.071631-9.526981-18.839067-18.798135-38.189787-58.748009-45.199435-94.215802-6.702656-3.428076-12.852726-8.575306-18.051121-15.20633-10.19213-13.006222-16.823154-31.732725-19.698644-55.667857-2.732228-22.75833 4.082992-40.164768 13.323447-51.451836-25.050536-103.947444-17.692964-183.03878 21.908986-235.227396 33.42118-44.032866 88.577385-67.057255 163.954119-68.438719 0.122797-0.010233 0.245593-0.010233 0.378623-0.010233 49.415456 0 86.448908 13.323447 105.789395 37.749766 35.05847 6.938016 61.715597 24.774243 79.316463 53.109592 18.992563 30.566156 26.513864 72.357981 22.349007 124.208906-2.967588 37.043684-11.102872 69.789483-16.833387 89.273233 8.964162 11.2973 15.451924 28.468378 12.770861 50.786687-2.87549 23.935132-9.496282 42.661635-19.698644 55.667857-5.188162 6.610558-11.317767 11.747555-17.999956 15.185864-4.553713 23.8942-13.609972 44.933375-19.156292 56.333006-6.098905 12.545734-14.807241 27.792996-25.009603 37.974893-0.020466 3.295046-0.051165 6.508227-0.081864 9.670244-0.184195 20.742417-0.337691 38.762839 1.616824 61.971423 12.525268 28.795836 54.081733 45.199435 101.992929 64.120366 49.89641 19.698644 106.444311 42.027186 144.245242 85.98842 7.367805 8.575306 6.395664 21.48943-2.169409 28.867468-8.575306 7.367805-21.499663 6.395664-28.867468-2.179642-31.200606-36.296671-80.534198-55.770188-128.240733-74.599022-55.882751-22.062482-108.654652-42.896996-126.275985-90.26584-0.63445-1.698688-1.033539-3.479241-1.197268-5.290493-2.40477-26.677593-2.220574-47.225581-2.036379-68.970838 0.061398-6.129604 0.112564-12.463869 0.112564-19.084661 0-7.490601 4.093225-14.367219 10.652618-17.959024 7.562233-5.464455 31.568996-45.455261 35.723619-84.320431 1.043772-9.772574 8.892531-17.426905 18.685571-18.225083 2.619664-0.214894 13.20065-7.592932 17.068747-39.765679 1.985214-16.526395-6.057973-22.338774-6.139837-22.400173-8.145517-4.952802-11.757788-14.858406-8.749268-23.914666 15.717983-47.286979 33.9226-140.837632 2.466168-191.481056-12.555967-20.210297-31.968086-31.886221-59.341526-35.69292-6.293333-0.86981-11.819187-4.625344-14.960737-10.140964-9.148357-16.055674-37.493939-25.654286-75.847455-25.684986-62.104453 1.176802-106.485243 18.757203-131.914402 52.260248-16.833387 22.195511-26.196639 52.239781-27.803229 89.303932-1.524726 35.017538 3.816932 76.318176 15.871479 122.745578 2.27174 8.728802-1.442862 17.918092-9.138124 22.615067-0.051165 0.030699-8.114818 5.863545-6.129604 22.38994 3.868097 32.172747 14.449084 39.550785 17.068747 39.765679 9.803273 0.798179 17.641799 8.452509 18.685571 18.225083 4.123924 38.670741 28.928866 78.784344 36.767392 84.299965 6.579859 3.581572 10.69355 10.478655 10.69355 17.97949 0 6.54916 0.051165 12.811794 0.102331 18.869766 0.184195 21.816888 0.36839 42.426275-2.056845 69.185732-0.153496 1.811252-0.562818 3.591805-1.197268 5.290493-17.621333 47.38931-70.608128 68.223824-126.69554 90.286306-38.404682 15.103999-78.119195 30.719652-108.593254 55.268768-27.557636 22.205745-43.766806 48.709375-50.019207 82.263585l755.210207 0C927.554414 890.899586 936.723238 900.06841 936.723238 911.36571z" p-id="2191"></path></svg></a>
  <div class="hover-on"></div>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
nav {
  width: 500px;
  height: 105px;
  margin: 50px auto 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #432fbf;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
  position:relative;
  .hover-on{
    display:block;
    width:155px;
    height:60px;
    border-radius:10px;
    content:"";
    position:absolute;
    left:15px;
    background:#5E4ECB;
    z-index:10;
    transition:left .2s linear
  }
}
nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position:relative;
  cursor:pointer;
  z-index:99;
  svg {
    fill: #fff;
    height: 30px;
    width:30px;
    opacity:.5;
    margin-left:0;
    transition:all .5s linear;
    position:absolute;
    left:50%;
    margin-left:-15px;
  }
  &.active {
    svg{
      margin-right:10px;
      opacity:1;
      position:static;
      transform:none;
    }
    &::after{
      opacity:1;
    }
  }
  &::after {
    display:block;
    content: "";
    font-size: 24px;
    color: #fff;
    opacity:0;
    transition:opacity .2s linear
  }
  &:nth-of-type(1) {
    &::after {
      content: "Home";
    }
  }
  &:nth-of-type(2) {
    &::after {
      content: "Inbox";
    }
  }
  &:nth-of-type(3) {
    &::after {
      content: "Profile";
    }
  }
}
@keyframes showIn{
  0% {opacity:0}
  100% {opacity:1}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var btns = document.getElementsByTagName("a");
var navLeft = document.getElementById("tab").offsetLeft;
console.log("navLeft", navLeft);
var hover = document.getElementsByClassName("hover-on")[0];
for (var i = 0; i < btns.length; i++) {
  var btn = btns[i];
  btn.index = i;
  btn.onclick = function () {
    console.log('按钮左侧距离',this.offsetLeft)
    for (var j = 0; j < btns.length; j++) {
      btns[j].className = "";
    }
    this.className = "active";
    hover.style.left = this.offsetLeft-40 + "px";
  };
}

总体基本还原了动图的效果，但是还是对实现有些不满意，首先是文字的渐变有些过慢，所以在移除当前tab的时候，文字的渐隐和图标会有一段重合的时间，不够美观，大家如果有其他更优雅的方法也欢迎在评论区附上你们的代码