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

Answer 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)

Answer 2

2

Pensamiento rápido:window.onload = function(){document.body.className += " loaded";} body.loaded p.green{transition:color .2s;}

Shmiddty

Answer 3

1

Eso funcionaría si solo tiene una pequeña cantidad de clases con transición de color. Estoy buscando una respuesta que no sea de JavaScript preferiblemente ...

nienn

Answer 4

No puedo recrear el problema en Chrome: jsfiddle.net/ShyZp

Shmiddty

Answer 5

el problema no me ocurre en Chrome, bríndenos su código exacto en un jsfiddle, por favor ...

Ilan Biala

Answer 6

1

El problema se puede ver aquí, pero esto solo es válido si las dos declaraciones no ocurren en el mismo archivo: jsfiddle.net/ShyZp/2

Shmiddty

Answer 7

110

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 .

spencer.sm
fuente

2

Tenía <script async src="main.js"></script>al final de mi documento. La eliminación del asyncatributo corrigió las transiciones no deseadas en la carga de la página. 👍

Kyle Fox

2

Al igual que @KyleFox, tenía una etiqueta deferen mi <script>etiqueta y eliminarla resolvió mi problema. Después de eso, moví el guión al final del documento.

jonathanbell

Esto funcionó de manera inconsistente para mí (anteriormente, el error sucedía el 100% del tiempo; con este cambio, sucedía el 50% del tiempo). Lo que funcionó el 100% del tiempo, y esta respuesta me inspiró a probar, fue reordenar las cosas en el <head>de mi documento para que mi CSS se incluyera antes de mi JavaScript en lugar de después; Literalmente resolví el error moviendo mi <script>etiqueta de Google Analytics . Claramente, hay alguna condición de carrera o problema de tiempo en Chrome que se puede suavizar con el retraso causado al interpretar un poco de JS, aunque la mecánica precisa me resulta misteriosa.

Mark Amery

2

FWIW, todavía tenía este problema incluso sin JS en la página. Lo único que me solucionó fue mover el CSS al inicio de la <body>etiqueta. Lo agregué <link rel="preload" href="main.css" as="style">para <head>que aún se descargara de inmediato.

Ted Whitehead

No tenía un elemento <form> en mi página y resolvió el error

Cesar Castro

Answer 8

2

Tenía <script async src="main.js"></script>al final de mi documento. La eliminación del asyncatributo corrigió las transiciones no deseadas en la carga de la página. 👍

Kyle Fox

Answer 9

2

Al igual que @KyleFox, tenía una etiqueta deferen mi <script>etiqueta y eliminarla resolvió mi problema. Después de eso, moví el guión al final del documento.

jonathanbell

Answer 10

Esto funcionó de manera inconsistente para mí (anteriormente, el error sucedía el 100% del tiempo; con este cambio, sucedía el 50% del tiempo). Lo que funcionó el 100% del tiempo, y esta respuesta me inspiró a probar, fue reordenar las cosas en el <head>de mi documento para que mi CSS se incluyera antes de mi JavaScript en lugar de después; Literalmente resolví el error moviendo mi <script>etiqueta de Google Analytics . Claramente, hay alguna condición de carrera o problema de tiempo en Chrome que se puede suavizar con el retraso causado al interpretar un poco de JS, aunque la mecánica precisa me resulta misteriosa.

Mark Amery

Answer 11

2

FWIW, todavía tenía este problema incluso sin JS en la página. Lo único que me solucionó fue mover el CSS al inicio de la <body>etiqueta. Lo agregué <link rel="preload" href="main.css" as="style">para <head>que aún se descargara de inmediato.

Ted Whitehead

Answer 12

No tenía un elemento <form> en mi página y resolvió el error

Cesar Castro

Answer 13

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.

Answer 14

Esta es una solución acertada o incorrecta: puede funcionar hoy pero fallar mañana cuando realice cambios en el código.

John Ohara

Answer 15

También puedo reproducir el problema sin un solo archivo JS, por lo que esta respuesta no resolverá mi problema. El aceptado lo hace aunque.

Álvaro

Answer 16

Esta respuesta parece que su problema era el almacenamiento en caché.

TylerH

Answer 17

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>

Answer 18

4

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.

Manuszep
fuente

Sorprendido de que este error haya estado sucediendo durante años. Solo para agregar a la respuesta, las <script>etiquetas deben ir después de los elementos DOM con los que está experimentando el problema. Recomiendo ponerlo al final de su página.

Kenny Worden

Hmm. spencer.sm ha dado lo que es esencialmente un duplicado más completo de esta respuesta, ahora votado mucho más alto que el suyo. El tuyo fue el primero, pero desde que el suyo se ha elevado por encima, el tuyo ya no agrega ningún valor por existir, hasta donde yo puedo ver. ¿Quizás es hora de eliminarlo?

Mark Amery

Answer 19

Sorprendido de que este error haya estado sucediendo durante años. Solo para agregar a la respuesta, las <script>etiquetas deben ir después de los elementos DOM con los que está experimentando el problema. Recomiendo ponerlo al final de su página.

Kenny Worden

Answer 20

Hmm. spencer.sm ha dado lo que es esencialmente un duplicado más completo de esta respuesta, ahora votado mucho más alto que el suyo. El tuyo fue el primero, pero desde que el suyo se ha elevado por encima, el tuyo ya no agrega ningún valor por existir, hasta donde yo puedo ver. ¿Quizás es hora de eliminarlo?

Mark Amery

Answer 21

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.

Answer 22

esta es la solución si no tiene un archivo js y no quiere usar js

CodeWeis

Answer 23

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.

Answer 24

Solo para agregar, tuve el mismo problema y resultó que era un video que retrasaba la carga de la página. Eliminar el video en iOS solucionó el problema.

Scott w

Answer 25

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

Answer 26

-2

¿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

Banath
fuente

Lo estoy usando, lo siento, solo pensé en poner un código simplificado en la pregunta.

nienn

Muy bien, por cierto, pensé que IE no es compatible con las transiciones CSS3.

Banath

¡Bueno, allá vas! :) ¡Estas en lo correcto, por su puesto! Me he quedado atascado en Chrome para este, fui a IE solo por esta pregunta y ni siquiera pensé en ese * detalle menor ...

nienn

Answer 27

Lo estoy usando, lo siento, solo pensé en poner un código simplificado en la pregunta.

nienn

Answer 28

Muy bien, por cierto, pensé que IE no es compatible con las transiciones CSS3.

Banath

Answer 29

¡Bueno, allá vas! :) ¡Estas en lo correcto, por su puesto! Me he quedado atascado en Chrome para este, fui a IE solo por esta pregunta y ni siquiera pensé en ese * detalle menor ...

nienn

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

CSS

HTML

Respuestas: