我正在使用过渡创建2级导航。我面临的问题是,当下拉导航展开时,它会摇动整个菜单中的文本。 我创建了一个codepen示例。当我转换为转换服务导航项目上的向下箭头时,似乎会出现此问题。如果我从.nav类中删除垂直对齐,它会减少抖动,但它仍然存在。
.header {
background: #0c121f;
width: 100%;
color: #fff;
}
.header:before, .header:after {
content: "";
display: table;
}
.header:after {
clear: both;
}
.header-banner {
float: left;
position: relative;
vertical-align: bottom;
}
.header-logo, .header-tel {
display: block;
}
.header-tel {
height: 1.5rem;
}
@media only screen and (min-height: 768px) {
.header-banner {
height: 9.375rem;
width: 20%;
}
}
[class^="ico-"]:before, [class*=" ico-"]:before, [class^="ico-"]:after, [class*=" ico-"]:after {
font-family: ico;
font-size: 0.9375rem;
line-height: 0.9375rem;
font-style: normal;
margin-right: 0.9375rem;
}
.ico-downarrow:before {
content: "\e007";
}
.ico-downarrow {
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
.ico-downarrow:before {
position: absolute;
left: 19px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.nav-wrap {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #ccc;
}
.nav, .sub-nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav {
z-index: 1000;
}
.nav a {
display: block;
color: #fff;
white-space: nowrap;
font-size: 0.9375rem;
-webkit-font-smoothing: subpixel-antialiased;
line-height: 0.9375rem;
height: 3.3125rem;
padding: 15px;
}
.nav-item {
position: relative;
}
.sub-nav {
overflow: hidden;
background: #394356;
max-height: 0;
-webkit-transition: max-height 0.3s ease-in-out;
-moz-transition: max-height 0.3s ease-in-out;
transition: max-height 0.3s ease-in-out;
}
.active a {
color: #fff;
}
@media only screen and (min-width: 40.063em) {
.nav-wrap {
height: 9.375rem;
display: block;
float: left;
}
.nav {
position: relative;
width: 53.125rem;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.nav-item {
position: relative;
display: table-cell;
width: 1%;
}
.nav-item:hover {
background: #394356;
}
.sub-nav {
position: absolute;
top: 3.3125rem;
left: 0;
}
.sub-nav-item:hover {
background: #49566f;
}
.dropdown:hover .sub-nav {
max-height: 13.25rem;
}
.dropdown:hover .ico-downarrow {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
.dropdown-toggle {
background: #2c3341;
position: absolute;
height: 3.3125rem;
width: 3.3125rem;
right: 0;
top: 0;
}
我检查IE和Mozilla工作正常。只是Chrome。 请帮忙。
答案 0 :(得分:0)
我已经解决了自己的问题,感谢有人试过。我只是使用不同的方法垂直对齐导航。所以我认为问题在于铬渲染如何变换(translateY(-50%))。
.nav {
height: $nav-item-height;
width: rem-calc(850); // 850px
position: absolute;
top: 50%;
right: 0;
margin-top: -($nav-item-height/2); // -26.5px
}