Pregunta sobre Responsive Menu - Create Mobile-Friendly Menu de Wordpress:

Presione la barra lateral del men煤 de transici贸n CSS en Chrome

Un usuario pregunt贸 馃憞

Hola Peter, 驴Todo bien? Espero,

Vea una 煤ltima gran pregunta, como autor de este plugin; – 驴Tiene alguna idea de c贸mo podemos terminar la transferencia de CSS desigual manteniendo el valor de deslizamiento lento establecido como lo tenemos en este caso, por favor?

https://stackoverflow.com/q/51898825/4642215

En Chrome en algunas PC lo veremos; estar谩 claro en Edge, puede ver este problema probado. No estoy interesado en resolver este problema para Edge, pero tal vez ese navegador le d茅 una idea de lo que est谩 sucediendo all铆.

Logr茅 obtener la p谩gina en el modo de optimizaci贸n m谩s alto posible mientras obten铆a una puntuaci贸n bastante alta en el analizador de p谩ginas web (ok, no desactiv茅 los plugins para que el c贸digo fuera accesible);

Abra el enlace de ubicaci贸n en modo inc贸gnito (la 煤ltima versi贸n de Chrome). Agradecemos cualquier idea. Todo lo mejor,

Este tema fue modificado hace 2 a帽os, 2 meses por. Este tema fue modificado hace 2 a帽os, 2 meses por.

(@ peterfeatherstone-1)

Hace 2 a帽os, 2 meses

Oye Ann,

No obtengo una transici贸n CSS n铆tida y he probado algunos navegadores. Mi plugin no hace nada especial sobre las transiciones, es solo una transici贸n de transformaci贸n muy simple.

#responsive-menu-pro-container {
   transition: transform 2.5s;
}

驴Has intentado jugar con diferentes tipos de transiciones? Tambi茅n parece haber agregado algunos puntos CSS adicionales, como cambiar completamente el contenedor, d谩ndole un m谩ximo de 0, adem谩s de agregar un retraso de transferencia y una funci贸n de sincronizaci贸n de transferencia que no creo que est茅 ayudando. Cuando elimino todos esos, la animaci贸n completa es un poco m谩s suave para m铆, pero a煤n no es linda para m铆 de ninguna manera.

El siguiente hilo puede ayudar:

https://stackoverflow.com/questions/15605731/jerky-css-transform-transition-in-chrome

Una respuesta sugiere usar la SEC a continuaci贸n, que podr铆a probar:

#responsive-menu-pro-container {
  will-change: transform;
}

Tambi茅n de ese hilo:

Cuando una animaci贸n se ejecuta lentamente y parece desigual, solo revela las limitaciones del navegador siempre presente.

Desafortunadamente, creo que estos problemas pueden causar animaciones largas y lentas, adem谩s de ser una experiencia de usuario molesta.

por favor avise

Peadar

(@ wpuser_78)

Hace 2 a帽os, 2 meses

Listo, lo hice! Y ahora funciona perfectamente como ** tu hijo (en la 煤ltima versi贸n de Chrome, sin otros navegadores o dispositivos m贸viles, no me interesa); He cambiado esto:

#responsive-menu-pro-button,
#responsive-menu-pro-container,
#responsive-menu-pro-header,
button#responsive-menu-pro-button,
.edge-wrapper {
    -webkit-transition: 2.6s ease;
    -moz-transition: 2.6s ease;
    -ms-transition: 2.6s ease;
    -o-transition: 2.6s ease;
    transition: 2.6s ease;
    -ms-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -moz-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -o-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -webkit-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#responsive-menu-pro-container.push-left,
#responsive-menu-pro-container.slide-left {
    -webkit-transform: translate3d(-800px, 0, 0);
    -moz-transform: translate3d(-800px, 0, 0);
    -ms-transform: translate3d(-800px, 0, 0);
    -o-transform: translate3d(-800px, 0, 0);
    transform: translate3d(-800px, 0, 0);
    -webkit-transform: translate(-800px, 0);
    -moz-transform: translate(-800px, 0);
    -ms-transform: translate(-800px, 0);
    -o-transform: translate(-800px, 0);
    transform: translate(-800px, 0);
}

.responsive-menu-pro-open #responsive-menu-pro-container.push-left,
.responsive-menu-pro-open #responsive-menu-pro-container.slide-left {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); 
 }

隆Gracias de nuevo Peter por tu gran adici贸n, tiempo e inter茅s!

(@ peterfeatherstone-1)

Hace 2 a帽os, 2 meses

Oye Ann,

GUAU. Me alegro de que te hayas ordenado, 隆buen trabajo!

Av铆same si necesitas algo m谩s 馃檪

Peadar

驴Solucion贸 tu problema??

0 / 0

Deja una respuesta 0

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *