6

您好，正在为一个新站点进行站点设计，主页有一些使用 CSS3 过渡的飞扬菜单。

如果你去 --------- 并查看 chrome 主页上的“一些不错的菜单”、“另一个很酷的菜单”等链接，当你将鼠标悬停在它们上面时，就会出现 flyup但过渡并不顺畅，菜单标签看起来像是上下振动。我在下面包含了 CSS，但它可以在网站上的 style.css 文件中找到（相关部分从第 1905 行开始）

这仅在 chrome 中，Safari 和 Firefox 工作正常，IE ......好吧，现在不谈了......

.home #site-navigation .menu-main-menu-container .trait-box { 
    width: 100%; 
}

.home .main-navigation ul,
.home .main-navigation {
    margin: none;
    border: none;
}

.home .main-navigation ul li {
    border: none;
}

.home .main-navigation ul li a {
    margin-left: 0;
    margin-right: 0;
}

.home .trait-box { 
    margin-top: 480px; 
    display: block; 
    text-align: center; 
    height: 126px; 
    position: relative; 
    color: #4e4e4d; 
    text-decoration: none !important;
}
.home .trait-box h4 { 
    position: absolute;
    bottom: 35px; 
    width: 90%; 
    font-size: 16px;
    font-size: 1.14285714rem;
    line-height: 20px;
    line-height: 1.25;
    font-family: 'ProximaNovaSemibold', Arial, Helvetica;
    font-weight: normal;
    color: #D06F4A;
    margin-left: 5%;
}

.home .trait-box figure { 
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    opacity: 0;
}
.home .trait-box figure img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
}
.home .trait-box dl {
    border-top-color: #D06F4A;
    border-top-style: solid;
    border-top-width: 12px;
    position: absolute;
    top: 0px;
}

.home .trait-box.main-menu-orange dl {
    border-top-color: #D06F4A;
    border-top-style: solid;
    border-top-width: 12px;
}
.home .trait-box.main-menu-teal dl {
    border-top-color: #405C69;
    border-top-style: solid;
    border-top-width: 12px;
}
.home .trait-box.main-menu-blue dl {
    border-top-color: #5E7599;
    border-top-style: solid;
    border-top-width: 12px;
}
.home .trait-box.main-menu-green dl {
    border-top-color: #A9B800;
    border-top-style: solid;
    border-top-width: 12px;
}

.home .trait-box dd { 
    font-size: 15px;
    font-size: 1.07142857rem;
    line-height: 19px;
    line-height: 1.266666667;
    margin-bottom: 12px;
    font-family: Georgia, Times, 'Times New Roman', serif;
    color: #595959;
    padding: 0 10px;
    overflow: hidden;
    height: 0;
    opacity: 0;
    margin-top: 20px;
}

.home .trait-box dd span {
    white-space: nowrap;
    display: block;
    width: 70%;
    padding: 3px 0;
    margin: 38px auto 40px;
    background: #D06F4A;
    font-size: 15px;
    font-size: 1.07142857rem;
    font-family: 'ProximaNova', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    padding: 5px 10px;
    padding-top: 12px;
    color: #ffffff;
    opacity: 0;
}

.home .trait-box.main-menu-orange dd span {
    background-color: #D06F4A;
}

.home .trait-box.main-menu-blue dd span {
    background-color: #5E7599;
}

.home .trait-box.main-menu-teal dd span {
    background-color: #405C69;
}

.home .trait-box.main-menu-green dd span {
    background-color: #A9B800;
}

.home .trait-box,
.trait-box figure,
.trait-box dd,
.trait-box dl,
.trait-box dd span {
    -webkit-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98);
    -webkit-transition-delay: 0;
    -moz-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
    -o-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
    transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
}

.home .trait-box:hover,
.trait-box.expanded {
    margin-top: 0;
    padding-top: 400px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    background: white;
}

.home .trait-box:hover figure, 
.trait-box.expanded figure {
    height: 184px;
    opacity: 1;
}

.home .trait-box:hover dl {
    margin-top: 184px;
}

.home .trait-box:hover dd,
.trait-box.expanded dd { 
    height: 170px;
    opacity: 1;
}

.home .trait-box:hover dd span,
.trait-box.expanded dd span {
    opacity: 1;
}

.home .trait-box:hover dd span:hover,
.trait-box.expanded dd span:hover {

}

.home .trait-box:hover,
.trait-box.expanded {
    -webkit-transition-duration: 225ms;
    -moz-transition-duration: 225ms;
    -o-transition-duration: 225ms;
    transition-duration: 225ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.home .trait-box:hover figure, 
.trait-box.expanded figure { 
    -webkit-transition-duration: 225ms;
    -moz-transition-duration: 225ms;
    -o-transition-duration: 225ms;
    transition-duration: 225ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.home .trait-box:hover dl, 
.trait-box.expanded dl { 
    -webkit-transition-duration: 225ms;
    -moz-transition-duration: 225ms;
    -o-transition-duration: 225ms;
    transition-duration: 225ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.home .trait-box:hover dd,
.trait-box.expanded dd {
    -webkit-transition-duration: 540ms;
    -moz-transition-duration: 540ms;
    -o-transition-duration: 540ms;
    transition-duration: 540ms;
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}
.home .trait-box:hover dd span,
.trait-box.expanded dd span {
    -webkit-transition-duration: 540ms;
    -moz-transition-duration: 540ms;
    -o-transition-duration: 540ms;
    transition-duration: 540ms;
    -webkit-transition-delay: 1100ms;
    -moz-transition-delay: 1100ms;
    -o-transition-delay: 1100ms;
    transition-delay: 1100ms;
}
4

2 回答 2

17

您正在导致浏览器重排，这很昂贵，并且会更改每个动画步骤的布局，从而导致抖动和抖动。

要解决这个问题，您需要对动画元素应用绝对定位，将其添加到您的 CSS 将帮助您开始：

.home .main-navigation ul {
  position: relative;
  height: 180px;
}

.home .main-navigation ul li {
  position: absolute;
  display: block;
}

.home .main-navigation ul li:nth-child(1) { left: 0;}
.home .main-navigation ul li:nth-child(2) { left: 25%;}
.home .main-navigation ul li:nth-child(3) { left: 50%;}
.home .main-navigation ul li:nth-child(4) { left: 75%;}

这只是一个起点，您必须编写更多 CSS 才能正确显示具有绝对定位的元素。

于 2013-07-20T03:37:13.317 回答
0

首先，我不得不说菜单看起来很漂亮。我可以将它用于一个项目。你用的是什么 WP 主题？太棒了！

严肃地说，似乎 CSS 动画只是在 Chrome 呈现它们时引起了错误。我有两个解决方案给你（它们都需要一些工作）：

1.使用 animate.css 查看预建的 CSS 动画是否做得更好，在 Chrome 上是否稳定。http://daneden.me/animate/

2.使用 jQuery 动画菜单，这也是一个稳定的解决方案。

于 2013-07-20T01:04:27.337 回答