Evite que la transición de CSS se active al cargar la página

Question 1

Estoy experimentando un problema con la transitionpropiedad CSS que se activa al cargar la página.

El problema es que cuando aplico a color transitiona un elemento, (por ejemplo transition: color .2s:), cuando la página carga por primera vez, mis elementos parpadean de negro a su propio color asignado.

Suponiendo que tenga el siguiente código:

CSS

p.green {
   color: green;
   transition: color .2s;
   -moz-transition: color .2s;
   -webkit-transition: color .2s;
   -o-transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>
    <p class="green">The Flashing Text</p>
</body>
</html>

Al cargar la página, mi p.greense desvanecerá de blacka green.

No quiero aplicar la transición de color a la pseudoclase:hover ya que eso no aplicaría la transición onMouseLeave .

Es realmente molesto que el texto aparezca en la página web. Hasta este momento he estado evitando usar transiciones a menos que realmente las necesite y aun así las uso con cuidado. ¡Sería genial si hubiera alguna solución realmente obvia para esto que no estoy viendo!

Esto sucede en Google Chrome. No lo he probado en otros navegadores.

jsfiddle.net/ShyZp/2 (gracias @Shmiddty)

Question 2

Hay un error en Chrome que hace que se activen las transiciones CSS si la página incluye un <form>elemento.

Una solución simple es agregar una etiqueta de secuencia de comandos que contenga un solo espacio al pie de página.

<script> </script>

Puede seguir el error en https://crbug.com/332189 y https://crbug.com/167083 .

Question 3

Los comentarios de @Shmiddty sobre esta pregunta me dejaron pensando, así que estuve jugando con el código y encontré una solución.

El problema radica en las headerdeclaraciones. Al invertir el orden de las llamadas de archivos externos CSS y JS, es decir, poniendo el CSS antes que el JS, las transiciones de color dejan de activarse al cargar la página:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>

Supongo que la carga de JS estaba retrasando la carga de CSS hasta después de que el DOM estaba listo. En ese momento (como sugirió @Shmiddty) al texto ya se le había asignado el color predeterminado del navegador y luego estaba usando mi transitiondeclaración CSS para desvanecerse en su color de estilo.

** Todavía no estoy seguro de que esta sea la forma más adecuada de hacerlo, pero funciona. Si alguien tiene una solución mejor, no dude en agregarla o editarla.

Question 4

Agregue a su CSS:

.css-transitions-only-after-page-load * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

Y agregue algo de código a su archivo JavaScript global:

$(document).ready(function () {
    $(".css-transitions-only-after-page-load").each(function (index, element) {
        setTimeout(function () { $(element).removeClass("css-transitions-only-after-page-load") }, 10);
    });
});

Ahora puede marcar cualquier elemento en su página con la clase css-transitions-only-after-page-load :

<div class="container css-transitions-only-after-page-load">
...
</div>

Question 5

La respuesta aceptada no funcionó para mí. Hay un error en Google Chrome que se puede evitar simplemente agregando un script en la página . Incluso un guión vacío resuelve el problema.

Question 6

La mejor manera de resolver este problema es usar el espacio único, la <script>solución vacía que se encuentra en las respuestas de esta página. Sin embargo, encontré otras 2 formas de resolver este problema.

Coloque el CSS de los elementos infractores dentro de una <style>etiqueta en el encabezado de su archivo HTML. El error solo ocurre cuando se llama al CSS desde una hoja de estilo externa.
Coloque los elementos infractores en un flexboxrecipiente. Esto también corrige el error.

Question 7

nienn publica la solución . El problema radica en el encabezado del documento y dónde y cómo está cargando sus hojas de estilo. Es similar a "no se pueden modificar los encabezados, ya están enviados" en PHP, excepto que HTML / CSS / webkit no arroja ningún error.

Estaba experimentando este problema exacto, leí la publicación de Nienn y revisé mi cabeza. Aquí estaban mis contenidos anteriormente.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <title>My title</title>
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
</head>

Observe que no estoy cargando ningún JS, también tenga en cuenta cómo estaba cargando la página de hojas de estilo después de especificar el título. Después de mover las referencias de la hoja de estilo a la 'parte posterior', funcionó de maravilla. El resultado final se ve así:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
    <title>My title</title>
</head>

No solo javascript puede causar este problema, sino también el título del sitio. Supongo que una buena regla general es css> js> título del sitio.

Question 8

Puede simplemente agregar una etiqueta de secuencia de comandos vacía a su archivo html.

Me gusta esto:

<script type="text/javascript"></script>

pero debe incluir al menos un carácter. Espacio o nueva línea (\ n) o comentario (//) o lo que sea

<script type="text/javascript"> </script>

<script type="text/javascript">
</script>

<script type="text/javascript">//</script>

O simplemente vincule un archivo js a su archivo html

<script type="text/javascript" src="js/script.js"></script>

Puede colocar la etiqueta de secuencia de comandos en cualquier lugar que desee. En la etiqueta de la cabeza o el cuerpo .

Este problema solo ocurre durante el desarrollo porque en la situación final de un sitio web definitivamente tendrá un archivo js

Question 9

¿Ha intentado utilizar diferentes propiedades de transición? Como:

-moz-transition: color .2s; /* Firefox 4 */
-webkit-transition: color .2s; /* Safari and Chrome */
-o-transition: color .2s; /* Opera */

Me funcionó bien en Chrome.

EDITAR: Ya respondió la pregunta sobre los navegadores. Deberías intentar usar -webkit-transform