Chrome CSS 3切换不顺畅 [英] Chrome CSS 3 Transition Not Smooth

问题描述

您在新网站的网站设计工作，首页有一些使用CSS3过渡的flyup菜单。

Hi working on a site design for a new site and the homepage has some flyup menus using CSS3 transitions.

如果你去---------，看看好菜单，另一个酷菜单等。在Chrome上的主页上的链接，当您将鼠标悬停在它们上面时，飞翔出现，但转换不平滑，菜单标签显示为上下振动。我包括下面的CSS，但它可以在网站上的style.css文件（相关部分从第1905行开始）

If you go to --------- and take a look at the "Some Menu that is nice", "Another Cool Menu", etc. links on the homepage in chrome, when you mouse over them the flyups appear but the transition is not smooth and the menu label appears like it is vibrating up and down. I included the CSS below but it is available in the style.css file on the site (relevant parts start on line 1905)

这只是在chrome，Safari和Firefox工作正常和IE ...现在不允许谈论....

This is only in chrome, Safari and Firefox work fine and IE... well lets not talk about that right now....

.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;
}

推荐答案

=https://developers.google.com/speed/articles/reflow>浏览器回流，这是昂贵的，并且更改每个动画步骤的布局，导致不稳定和不稳定。

You are causing browser reflows, which are expensive and change the layout on each animation step, causing the jerkyness and jitterness.

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

To work around this, you need to apply absolute positioning to your animated elements, adding this to your CSS will get you started:

.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才能以绝对定位正确显示您的元素。

This is just a starting point, you will have to write more CSS in order to correctly display your elements with absolute positioning.

这篇关于Chrome CSS 3切换不顺畅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！