我在设置菜单项动画时遇到了困难,
我需要的是,当用户点击菜单项时,悬停时出现的条形图会以动画切换到一边。
到目前为止,我有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;
}
答案 0 :(得分: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} }
答案 1 :(得分:1)
问题是:在单纯css后,活动状态不会持续存在,你需要使用javascript来结束动画。
答案 2 :(得分:0)
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%。这是你要找的吗?