CSS `cambiar` – cómo utilizarlo, cómo funciona

He encontrado CSS will-changeW3.org docs, MDN docs de la propiedad (que ya funciona en Chrome y es partiali compatible con Firefox y Opera) pero no estoy muy seguro de cómo funciona.
¿Alguien sabe algo más acerca de este misterioso cosa?

Acabo de leer que permite que el navegador para prepararse para el cálculo sobre el elemento en el futuro.
No quiero malinterpretan. Así que tengo un par de preguntas.

  1. Debo añadir esta propiedad a la clase de elemento o su pase estado?

    .my-class{
        will-change: 'opacity, transform'
    }
    .my-class:hover{
        opacity: 0.5
    }
    .my-class:active{
        transform: rotate(5deg);
    }

    O

    .my-class{
        ...
    }
    .my-class:hover{
        will-change: 'opacity'
        opacity: 0.5
    }
    .my-class:active{
        will-change: 'transform'
        transform: rotate(5deg);
    }
  2. ¿Cómo puede aumentar el rendimiento del explorador? Teóricamente, cuando CSS se carga, el navegador ya «sabe» qué va a pasar con cada elemento, ¿no?

Si usted puede agregar cualquier buen ejemplo que ilustra cómo usarlo de manera eficiente, voy a estar agradecido 🙂

InformationsquelleAutor LJ Wadowski | 2014-11-13

5 Kommentare

  1. 36

    No voy a copiar y pegar todo el artículo aquí, pero he aquí un tl;dr versión:

    Especificando de qué es exactamente lo que desea a cambio permite que el navegador a tomar mejores decisiones acerca de las optimizaciones que se necesita para hacer estos cambios. Obviamente, esta es una mejor manera de lograr un aumento de la velocidad sin tener que recurrir a hacks y forzar el explorador en la capa creaciones que puede o puede no ser necesaria o útil.

    Cómo usarlo:

    will-change: transform, opacity;

    Cómo que no lo uso:

    will-change: all;
    
    .potato:hover {
      will-change: opacity;
      opacity:1;
    }

    Especificando will-change en hover no tiene ningún efecto:

    Ajuste de cambio en un elemento inmediatamente antes de que cambios tiene
    poco o ningún efecto. (En realidad, puede ser peor que no se
    en todos los. Usted podría incurrir en el costo de una nueva capa cuando lo que estás
    la animación no tiene previamente calificados por una nueva capa!)

    • Una parte muy importante que faltan en este resumen está en el «Eliminar de cambiar Después de que los Cambios Se hacen» de la sección, donde se declaró que «Las optimizaciones que el navegador hace que para los cambios que están a punto de ocurrir generalmente son costosos y, como hemos mencionado antes, puede tomar mucho de los recursos de la máquina. El navegador habitual comportamiento de las optimizaciones que se hace es eliminar estas optimizaciones y volver a la normalidad comportamiento tan pronto como pueda. Sin embargo, de cambiar anula este comportamiento mantenimiento de las optimizaciones por mucho más tiempo que el navegador de otra manera haría.»
  2. 17

    Pasé algún tiempo en buscar cómo will-change de la propiedad las obras y cómo la utilizamos. Espero que, de ser útil resumen. Gracias a todos por las respuestas.

    1. Las Capas De Hack /Null Transformar Hack

    De ‘antigüedad’ (como hace 2 años) alguien sabe que puede llamar su animación CSS más rápido.

    ¿Cómo funciona?

    Si agrega transform: translateZ(0) a un selector css, que obligará a un navegador para mover el elemento con este selector para el nuevo compositor de la capa. Lo que es más, va a aumentar el rendimiento (en la mayoría de los casos, el uso de los poderes de la GPU en lugar de la CPU) leer más aquí.

    2. Adiós a los hacks, la bienvenida a «la voluntad de cambio:»

    Probablemente es demasiado pronto para decir adiós a la Capa de Hack, pero esta vez va a venir en breve.
    La nueva propiedad will change apareció en las especificaciones de CSS y será un gran sucesor de la capa de hack.

    3. Compatibilidad del navegador

    Por ahora, está disponible en Chrome y Opera y parcialmente soportado por Firefox así.

    4. Cómo utilizar correctamente

    No utilización de cambiar cualquier parte de tu CSS hasta después de que usted se
    completar la implementación de sus animaciones. Sólo entonces deberá volver a
    tu CSS y aplicar la voluntad de cambio. Más

    Este es probablemente el más valioso consejo que usted puede conseguir.

    No hay ningún punto para usarlo directamente antes de una acción que comienza, por ejemplo, mediante la adición a la :hover estado de un selector. Debido a que el navegador no tendrá tiempo requerido para preparar la optimización antes de cambiar de ocurrencia. El navegador se necesitan aprox. 200ms para aplicar la optimización, así, por ejemplo, es mejor añadir will-change a un elemento cuando un padre de familia es el elemento activo del estado. Más

    Ejemplo:

     .parent:hover .change{
         will-change: opacity;
     }
     .change:hover{
        opacity: .5;
     }

    Que usted necesita para utilizar realmente con moderación. Si desea optimizar todo, los resultados serán contrario que los previstos. will-change fuerzas navegador para mantener la optimización de encendido y reserva de recursos como la memoria de los cambios en el futuro que puede que nunca suceda. Se recomienda desactivar will-change después, cuando ya no serán necesarios por ejemplo, cuando la animación está terminado.

    Usted puede hacerlo fácilmente con JavaScript document.getElementById('my_element_id').style.willChange = off;

    • «La reserva de recursos como la memoria de los cambios en el futuro»: lo Suficiente como razón para usarlo.
    • Bellal Derecha, si usted piensa acerca de pc, pero tienes que concider dispositivos móviles así…
    • Creo que no es una buena práctica para activar el uso de css y desactivar el uso de javascript, que incluye innecesarios de acoplamiento.
  3. 8

    Ahora con la ayuda de CSS se puede hacer de varias de las animaciones, y a veces esta animación se convierte en un cuello de botella para una CPU. Así que en lugar de hacer este trabajo en una CPU, sería bueno utilizar la GPU para esta tarea. Y no hace mucho tiempo la gente comenzó a usar un truco para hacer esto para una transformación 2D por hacer algo como:

    .accelerate {
      -webkit-transform: translate3d(0, 0, 0);
    }

    Esta hecho un navegador pensar que está haciendo una transformación 3D, y porque todas las transformaciones 3D son el uso de la GPU, este se descarga de la CPU. Esto parece chapucero (porque de hecho lo es) y will-change propiedad va a cambiar esta informando el navegador para mirar hacia fuera para los cambios en el futuro, y optimizar y asignar memoria en consecuencia.

    Basado en W3C proyecto de,

    La voluntad de cambio de propiedad de CSS … permite a un autor para informar a la UA por delante
    de momento de lo que los tipos de cambios que puedan aportar a un
    elemento. Esto permite que la UA para optimizar la forma en que manejan el elemento
    antes de tiempo, la realización potencialmente costoso trabajo de preparación para un
    la animación antes de la animación comienza realmente.

    Buena idea utilizar will-change es para que el navegador sepa de antemano lo que los cambios en un elemento que se puede esperar. Esto permite que el navegador para realizar la correcta optimización de antelación, lo que conduce a más rápido de representación.

    Esta información fue tomada a partir de este excelente explicación sobre will-change de la propiedad. El artículo tiene más ejemplo cuando es agradable de utilizar y cuando es inútil o incluso perjudicial

  4. 3

    Que yo sepa…

    1. Es una alternativa para traducir-z:0.
    2. No sé acerca de hover, pero afaik su mejor uso es en las propiedades que están siendo cambiados gradualmente por JS, el cambio de la opacidad, la posición durante el desplazamiento, etc.
    3. Esta propiedad no debe ser excesivo, especialmente en los teléfonos, tabletas, el uso de este en demasiadas
      los elementos pueden causar problemas de rendimiento.
    4. Se recomienda para eliminar/desactivar esta propiedad por JS cuando ya no es relevante.

    Para un ejemplo de uso sería la aplicación que en algún momento de desplazarse, con scrollTop:400, luego, gradualmente, animar la opacidad y en digamos scrollTop:500, deshabilitar cambiar de nuevo.

    Fuente: shoptalkshow podcast – se menciona en este artículo – https://dev.opera.com/articles/css-will-change-property/ – que es probablemente la mejor fuente de información de mi post 😀

  5. 0

    La mejor solución para mí:

    CSS:

    transform : translate(calc(-50% + 0.5px), calc(-50% + 0.5px));

    Pero, esta solución tiene problemas con calc en ios safari en una posición fija puede causar un alto consumo de batería

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea