-webkit-Aussehen zwingt Übergänge?

Question

Angesichts einer grundlegenden HTML-Vorlage und CSS-Stil, ich sehe zwei verschiedene Elemente reagieren völlig anders.

setTimeout(function() { 
 
    document.body.id = 'animate'; 
 
}, 100);

#animate input[type="checkbox"]{ 
 
    width: 100px; 
 
    height: 100px; 
 
    transition: 2s all; 
 
    -moz-appearance: none; 
 
} 
 
#animate div{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background:blue; 
 
    transition: 2s all; 
 
}

<input type="checkbox"/> 
 
<div></div>

Wenn Sie dies in einem Browser öffnen, sehen Sie, dass auf Last, die div bereits seine 100px Höhe/Breite hat, noch das Kontrollkästchen wächst von 0px auf 100px Höhe/Breite über 2s.

Warum verhält sich der input anders als die div? Liegt es daran, dass die Eingabe standardmäßig -webkit-appearance ist, was gibt es einen Übergang zwischen?

Answer 1

Die Standardbreite/-höhe div ist automatisch und wird daher nicht animiert.

Die input hat eine Standardbreite/-höhe und wird als solche animiert.

Als Randbemerkung, wird der Übergang am div arbeiten, wenn auch nur seine Farbe animieren, wie es möglich ist, sollten eine Farbe aus transparent zu blue

Sie auch nicht betrachten zu animieren Verwenden Sie all mit transition, da es unvorhersehbare Ergebnisse aufgrund dieser Tatsache geben kann, dass Browser einige Werte auf Elemente auf einen Standardwert setzen, wobei einige animiert werden können, andere nicht.

Also, in Ihrem Fall, wenn Ihre Absicht ist Breite/Höhe zu animieren, legen Sie es wie folgt auf: transiton: width 2s ease, height 2s ease;

Answer 2

Die Antwort ist einfach. Die input 's Stil hat eine vorinstallierte Werte im DOM, deshalb gerade nach dem Erscheinen im Dokument, ändert reibungslos seine Form.

Ganz im Gegensatz zu dem div Element. Die div hat keine vorinstalliert, Standardwerte im DOM, bevor sie vom Benutzer festgelegt werden. Deshalb erscheint es im Dokument mit bereits gesetzter Größe.

Wichtiger Hinweis
Wenn Sie den Übergang arbeiten wollen, hat es einen Satz haben, beginnen, Standardwert und Wert endet. Die Animation wird zwischen diesen beiden Werten stattfinden. Die input hat bereits den Standardwert der Größe festgelegt, deshalb wird die Animation auftreten.

Sie fragen vielleicht, warum der background Übergang funktioniert? Es funktioniert, da der Standardwert backgroundtransparent ist.

setTimeout(function() { 
 
    $('.xx').addClass('x'); 
 
}, 500);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
input[type="checkbox"] {} div {} .x { 
 
    width: 100px; 
 
    height: 100px; 
 
    transition: all 2s ease; 
 
    background: blue; 
 
} 
 
.container { 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='container'> 
 

 
    <input type='checkbox'> 
 
    <div class='xx'></div> 
 
    <input class='xx' type="checkbox"> 
 

 
</div>

Answer 3

Kurze Antwort ohne zu technischen zu sein. CSS-Transitionen werden ihre Aufgabe erfüllen, wenn es einen vorherigen Status gibt, von dem aus animiert werden kann.

Ein Standard div hat standardmäßig kein Styling. Ein input Element wird immer im Browser selbst vorgestylt.

Hier ist eine Geige, die verwendet werden kann, um das Verhalten wieder herzustellen, das das OP erwähnte. Es simuliert externes Laden mit einer einfachen JS-Verzögerung. https://jsfiddle.net/xvt359ju/1/

Nevermind, 2 andere Antworten war schneller als ich.

Answer 4

Browser haben ihre eigenen grundlegenden CSS-Stil von Elementen, die Kontrollkästchen haben es auch. Wenn Sie das Element untersuchen, können Sie die Breite und Höhe des vom Browser angewendeten Kontrollkästchens sehen, das beim Laden Ihrer externen Stylesheets überschrieben wird. Und es zu animieren, wie du ihm den Übergang gegeben hast.