Hola trabajo en un sitio, el diseño de un nuevo sitio y la página de inicio tiene algunos flyup menús usando CSS3 transiciones.

Si vas a ——— y echar un vistazo a la «Algunas Menú que es bonito», «Otro Fresco Menú», etc. enlaces en la página de inicio en chrome, cuando se pasa el ratón por encima de ellos el flyups aparecen pero la transición no es liso y el menú de la etiqueta aparece como vibra hacia arriba y hacia abajo. He incluido los CSS a continuación, pero ya está disponible en el estilo.archivo css en el sitio (partes pertinentes de inicio en la línea de 1905)

Esto es sólo en chrome, Safari y Firefox funciona bien y es decir… bueno deja de hablar de eso ahora….

.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;
}
  • Me he quedado en el pequeño margen («vibrando» como usted lo describe) antes de que demasiado. Por lo que puedo decir, es un Cromo de fallo específico con transiciones CSS3. Yo también creo que es específico de la animación de la propiedad de opacidad (que es donde me he encontrado que al menos). Nunca he encontrado una solución para que me temo, y aunque he encontrado a otras personas en Google con este problema, ninguno de ellos había una solución. Probablemente el mejor que se acaba de animar las cosas con jQuery en lugar de CSS3.
InformationsquelleAutor dpegasusm | 2013-07-19

2 Comentarios

  1. 14

    Que están causando el navegador se reajusta, que son caros y cambiar el diseño en cada animación paso, causando la jerkyness y jitterness.

    Para evitar esto, es necesario aplicar posicionamiento absoluto a sus elementos animados, añadir esto a tu CSS le ayudará a empezar:

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

    Esto es sólo un punto de partida, usted tendrá que escribir más a la CSS para mostrar correctamente los elementos con posicionamiento absoluto.

    • Gracias! voy a darle una oportunidad.
    • Que funcionó! Gracias!
  2. 0

    Primero de todo, tengo que decir que el menú se ve atractiva. Podría usarlo para un proyecto. ¿Qué tema WP estás usando? Es impresionante!

    En serio, parece como si las animaciones CSS son sólo causa de un error cuando Chrome hace. Tengo dos soluciones para usted (ambos de ellos se requiere algo de trabajo):

    1. El uso de animar.css para ver si el prediseñadas animaciones CSS se hizo mejor y son estables en el Cromo. http://daneden.me/animate/

    2. Animar el menú con jQuery, que también sería una solución estable.

    • Es una costumbre construido tema que estoy construyendo para un proyecto. estoy tratando de hacer es totalmente sensible y compatible con todos los navegadores y prefiero no sobrecargar con jquery si no tengo y se puede hacer eso mismo con css3
    • Tu CSS que realmente se hace como debe ser, pero el meneo es sólo un Cromo problema específico, por lo que lamentablemente voy a tener que decir lo que @ennui dijo: la única manera de hacer esto para Chrome es el uso de jQuery. Si este es el único script jQuery en su sitio, no sería para sobrecargarla. También, para la velocidad, usted podría un plugin de caché como WP Super Cache para hacer que su sitio sea rápido.

Dejar respuesta

Please enter your comment!
Please enter your name here