javascript - 单击时 CSS 滑动底部边框

Question

如何在单击菜单项时滑动该菜单项的底部边框。

这是我的代码

HTML -

<div class="menu">
    <div class="menu-item active">menu 1</div>
    <div class="menu-item">menu 2</div>
    <div class="menu-item">menu 3</div>
  </div>

少 -

 .menu-item {
      float: left;
      border-bottom: 2px solid grey;
      margin: 0 10px;
    padding: 0 10px;
      cursor: pointer;

  &.active {
    border-color: blue;
  }
}

JS-

$(document).ready(function(){
    $(".menu-item").on("click", function(e) {
      $(".menu-item").removeClass("active");
        console.log("yo");
        $(this).addClass("active");
      });
});

这里的工作演示 - FIDDLE

所以最初“menu1”有底部边框。当我单击“menu2”时，如何将底部边框从“menu1”滑动(动画)到“menu2”？

注意-

这是预期功能的示例演示 - DEMO

但是上面的demo是使用jQuery实现的。我正在寻找一个纯 CSS 解决方案。

Answer 1

我为此做了一项研究，遗憾的是我无法通过纯 css(具有动态元素和动态宽度)来做到这一点，我最终为此目的与 css 混合创建了一个 jQuery 插件，这是我的 jQuery 插件

jQuery:

$.fn.RegisterTabBar = function (id) {
    var $ele = $(this);
    if ($ele.prop("tagName") && $ele.prop("tagName").toLowerCase() == "ul" && id != undefined) {
        $ele.attr("data-style-id", id);
        $("<style type='text/css'></style>").attr("id", id).appendTo($("body"));
        $ele.find("li").on("click", function () {
            var $li = $(this),
                CurrentIndex = $ele.find(".active").removeClass("active").index(),
                ClickedIndex = $li.addClass("active").index();

            function SetStyle($ele, $li, IsToLeft) {
                var ID = $ele.attr("data-style-id");
                if (ID == undefined) return;
                if ($ele.width() <= 0) {
                    setTimeout(function () { SetStyle($ele, $li, IsToLeft); }, 100);
                    return;
                }

                $("style#" + ID).text(
                    "ul[data-style-id='" + ID + "']:before { " +
                        "left: " + $li.position().left + "px; " +
                        "right: " + ($ele.width() - $li.position().left - $li.outerWidth()) + "px; " +
                        "-webkit-transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
                        "transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
                    "} "
                );
            }
            SetStyle($ele, $li, ClickedIndex < CurrentIndex);
        });
    }
    return $ele;
}

CSS:

ul.tab-bar,
ul.tab-bar>li { position: relative; }
    ul.tab-bar.bar-style-1:before { background-color: #00668f; } /* Color of the bar*/
    ul.tab-bar:before {
        display: inline-block;
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        height: 3px;
        z-index: 1;
    }
    ul.tab-bar>li { list-style-type: none; border-width: 0; }
    ul.tab-bar.bar-style-1>li.active { color: #00668f; font-weight: 700; }
    li {
            list-style-type: none;
            display: inline-block;
            border-width: 0;
            height: 40px;
            margin: 0 20px;
            background-color: transparent;
            color: #9c9c9c;
            text-align: center;
            cursor: pointer;
        }

试试 https://jsfiddle.net/czf9kjfd/

编辑 1 --

这是“纯”CSS 版本，仅接受固定数量的元素并通过 jQuery 切换 active 类

CSS:

ul li {
  display: inline-block;
    font-weight: bold;
    width: 30%;
    padding: 7px 0;
    text-align: center;
    cursor: pointer;
  list-style-type: none;
}
ul li:last-child {
  margin: 0;
  padding: 0;
    height: 7px;
    background: #00b6ff;
  float: left;
}

ul li.active:nth-child(1) ~ li:last-child,
ul li:nth-child(1):hover ~ li:last-child {
    margin-left: 0%;
}

ul li.active:nth-child(2) ~ li:last-child,
ul li:nth-child(2):hover ~ li:last-child {
    margin-left: 30%;
}

ul li.active:nth-child(3) ~ li:last-child,
ul li:nth-child(3):hover ~ li:last-child {
    margin-left: 60%;
}

li:last-child {
    -webkit-transition: margin-left 0.2s ease;
    -moz-transition: margin-left 0.2s ease;
    -o-transition: margin-left 0.2s ease;
    transition: margin-left 0.2s ease;
    position: relative;
}

试穿:https://jsfiddle.net/yqpnckw4/1/