SOLUCIONADO Error de Chrome, Evita que la transición CSS3 se active al cargar la página Este podría ser un duplicado.


Obtengo algo extraño con el siguiente código:

JsFiddle: https://jsfiddle.net/xz3hcbqv/ Puede ver que funciona bien aquí y si lo exporto a mi propio archivo HTML así:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
            .stripes {
    cursor: pointer;
    width: 35px;
}

.stripe {
    width: 35px;
    height: 5px;
    margin: 6px 0;
    transition: background-color 10s;
    background-color: black;
}

label {
    background-color: black;
}

input {
    display: none;
    background-color: black;
}

input:checked + .navbar-toggle .stripe {
    background-color: red;
}

input:checked + .navbar-toggle .stripe.first {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

input:checked + .navbar-toggle .stripe.second {
    opacity: 0;
}

input:checked + .navbar-toggle .stripe.third {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
        </style>
        <link rel="stylesheet" href="style2.css">
    </head>
    <body>
                <nav class="navbar">
            <input type="checkbox" id="navbar-toggle-cbox">
            <label for="navbar-toggle-cbox" class="navbar-toggle collapsed">
                <div class="stripes">
                    <div class="stripe first"></div>
                    <div class="stripe second"></div>
                    <div class="stripe third"></div>
                </div>
            </label>
        </nav>

    </body>
</html>

Aún funcionando bien, observe que es exactamente el mismo código. Pero luego, cuando copio el interior de <style> </style> y lo coloco en un archivo style2.css. En la carga del navegador, también se desvanece el color negro.

¿Qué causa esto? ¿Como puedo resolver esto?

1
MrDikke 14 dic. 2016 a las 19:26

2 respuestas

La mejor respuesta

Saqué el código de la sección de estilo y lo coloqué en un archivo style2.css local y puse el resto del código en un archivo index.html y pude reproducir el efecto que estás describiendo, pero solo en Chrome (y en Chrome no produce el efecto en jsfiddle). Sin embargo, la regla que probablemente está causando el desvanecimiento es la transición a la regla .stripe. Parece que el problema que está describiendo se debe a un error en Chrome. Consulte esta pregunta para obtener más información: Detenga la transición de CSS3 para que no se active al cargar la página < / a>

2
Community 23 may. 2017 a las 12:13

Solución diferente: dado que es un error en Chrome afaik, puede establecer la transición 1 en la entrada: marcada.

Cuando se carga el navegador, la entrada aún no está marcada. De esta manera, no tendrá que usar JS u otra cosa elegante.

EDITAR: Agregar -webkit-transition también parece funcionar.

0
MrDikke 14 dic. 2016 a las 19:38