Question

我在设置菜单项动画时遇到了困难，

我需要的是，当用户点击菜单项时，悬停时出现的条形图会以动画切换到一边。

到目前为止，我有2个条形码，代码如下，：开始后：之前结束，但我不能：栏之前完成：之后开始点击（：有效和：焦点）

有没有人知道如何做到这一点？我尝试了jquery但没有成功。

HTML：

         <a class="item" href="http://www.google.com" title=" competências" target="_blank">
                <span class="nav-item">Competências</span>
            </a>
            <a class="item" href="" title=" Industrias" target="">
                <span class="nav-item">Industrias</span>
            </a>
            <a href="" title=" Soluções" target="">
                <span class="nav-item">Soluções</span>
            </a>
            <a class="item" href="" title=" About" target="">
                <span class="nav-item">About</span>
            </a>
            <a class="item" href="" title=" Parceiros" target="">
                <span class="nav-item">Parceiros</span>
            </a>
            <a class="item" href="" title=" Pessoas" target="">
                <span class="nav-item">Pessoas</span>
            </a>
            <a class="item" href="" title=" Contactos" target="">
                <span class="nav-item">Contactos</span>
            </a>
            <span class="skew-bar"></span>
            <a class="item" href="" title=" Blog" target="">
                <span class="nav-item">Blog</span>
            </a>
            <a class="item" href="" title=" Notícias" target="">
                <span class="nav-item">Notícias</span>
            </a>
            <a class="item" href="" title=" Recursos" target="">
                <span class="nav-item">Recursos</span>
            </a>
            <span class="skew-bar"></span>
            <a class="item" href="" title=" English" target="">
                <span class="nav-item">EN</span>
            </a>
        </nav>

CSS：

nav a {
    font-family: 'Roboto',sans-serif;
    font-size: 1em;
    font-weight: 300;
    text-decoration: none;
}

/*BEFORE ON HOVER*/
nav a span:before {
    border-bottom: 3px solid black;
    display: block;
    position: relative;
    z-index: 2;
    left: 0%;
    transform: translateY(22px);
    width: 1px;
    background: #000;
    overflow: hidden;
    content: '';
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
    -o-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
    -webkit-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear;
    -webkit-transition-delay: 0s, 0.3s;
    transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
}


nav a span:hover::before {
    width: 50%;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    position:relative;
    overflow: hidden;
}


/*BEFORE ON CLICK FOCUS*/
nav a span:after {
    border-bottom: 3px solid black;
    display: block;
    position: relative;
    z-index: 2;
    left: 50%;
    transform: translateY(-3px);
    width: 1px;
    background: #000;
    overflow: hidden;
    content: '';
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
    -o-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
    -webkit-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear;
    -webkit-transition-delay: 0s, 0.3s;
    transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
}


nav a span:active::after,nav a span:focus::after {
    width: 50%;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    position:relative;
    overflow: hidden;
}

Answer 1

焦点位于.item而不是span，因此您的选择器应该像

nav a:focus span::after

这里有代码https://jsfiddle.net/Lc9gp8fb/9/

- 编辑 -

通过此次更新，您可以向右关闭:before。

我设置为nav a span:before

margin-right: 50%;
float: right;

要将它保持在中间，当悬停时我设置

float: left;

所以，当它悬停时它会有float: left;并且动画将从左到右，当它没有悬停时，动画也将从左到右，因为它将具有{{1} }

https://jsfiddle.net/Lc9gp8fb/15/

Answer 2

问题是：在单纯css后，活动状态不会持续存在，你需要使用javascript来结束动画。

Answer 3

哟shold试图绝对地定位伪元素：

nav a {
    font-family: 'Roboto',sans-serif;
    font-size: 1em;
    font-weight: 300;
    text-decoration: none;

    position: relative
}

nav a span:before {
    content:'';
    display:block;
    position:abolute;
    top:100%;
    height:3px;
    background-color:#000000;

    transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
}
nav a span:before {
    left: 0%;
    right: 100%;
}
nav a:hover span:before {
    right: 50%;
}
nav a span:after {
    left: 100%;
    right: 0%;
}
nav a:active span:after {
    left: 50%;
}

这将使点击时的宽度为100％，悬停时为50％。这是你要找的吗？

使用伪css下划线菜单锚点动画

3 个答案: