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