Übergänge in CSS festlegen

1. Verwenden Sie die Eigenschaften opacity und visibility zusammen mit der Eigenschaft transition, um den Übergang in CSS festzulegen
2. Verwenden Sie die Eigenschaften height, opacity und overflow zusammen mit der Eigenschaft transition, um den Übergang in CSS festzulegen

In diesem Artikel werden Methoden zum Festlegen von Übergängen in CSS vorgestellt. Wir werden lernen, den Übergang bei opacity, height und visibility zu verwenden, um Ein- und Ausblendeffekte beim Schweben und beim Schweben zu erzielen.

Verwenden Sie die Eigenschaften opacity und visibility zusammen mit der Eigenschaft transition, um den Übergang in CSS festzulegen

Wir können die Eigenschaft transition in der Eigenschaft display in CSS nicht verwenden. Zum Beispiel können wir display : none nicht in display : block ändern, nachdem man den Mauszeiger bewegt hat (Mouse in) und umgekehrt, indem wir die CSS-Eigenschaft transition verwenden. Daher können wir die Eigenschaften opacity und visibility zusammen mit dem Übergang verwenden, um den Elementen Ein- und Ausblendeffekte zu verleihen. Der Übergang hat bestimmte Eigenschaften wie transition-property, transition-duration, transition-timing-function und transition-delay. Wir können die Kurzformeigenschaft von Transition auch als transition : opacity 2s linear 1s verwenden. Dabei steht opacity für Übergangseigenschaft, 2s für Übergangsdauer, linear für transition-timing-function und 1s für Übergangsverzögerung. Wir können Hover verwenden, um mit dem transition zu experimentieren.

Erstellen Sie beispielsweise ein div und verwenden Sie die Tags ul und li, um eine Liste mit drei ungeordneten Listenelementen zu erstellen. Geben Sie dem div einen Rahmen von 1px solid black, um es zu sehen. Setzen Sie die Eigenschaften von ul auf opacity: 0 und visibility: hidden und transition: visible 0s, opacity 0.6s linear. Wir verwenden sowohl opacity als auch visibility, denn wenn wir nur opacity: 0 verwenden, können die Elemente immer noch anklickbar und schwebend sein. Setzen Sie die Schwebeeigenschaft ul auf visibility: visible und opacity: 1, damit die Listenelemente von ul nur beim Schweben mit einem gewissen Übergangseffekt angezeigt werden.

Das folgende Beispiel zeigt, dass die Elemente von ul nur beim Schweben sichtbar sind. Die Elemente erscheinen innerhalb von 0,6 Sekunden mit einem linearen Effekt und werden beim Wegbewegen der Maus wieder ausgeblendet.

Beispielcode:

<div>
 <ul>
 <li> Apple </li>
 <li> Banana </li>
 <li> Mango </li>
 </ul>
</div>

div {
 border : 1px solid black;
}
div > ul {
 visibility: hidden;
 opacity: 0;
 transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
 visibility : visible;
 opacity : 1;
}

Verwenden Sie die Eigenschaften height, opacity und overflow zusammen mit der Eigenschaft transition, um den Übergang in CSS festzulegen

Eine andere Alternative zur Verwendung der Transition über display: none und display: block könnten die Eigenschaften height, overflow und opacity sein, die zusammen mit der Transition verwendet werden. Wir können opacity : 0 und height : 0 für die Liste einstellen, damit die Elemente nicht angezeigt werden. Wir müssen auch overflow: hidden setzen, damit die Elemente nicht aus dem div herauskommen, während transition-duration Zeit braucht. Wir können die Abkürzungseigenschaft transition wie in der ersten Methode verwenden.

Erstellen Sie beispielsweise ein div und erstellen Sie eine Liste von drei ungeordneten Elementen mit den Tags ul und li. Geben Sie dem div einen Rahmen von 1px solid black, genauso wie bei der ersten Methode. Setzen Sie die Eigenschaften von ul als opacity: 0 , overflow: hidden und height: 0. Legen Sie den Wert der Eigenschaft transition auf opacity 0.6s easy-in fest. Setzen Sie die Schwebeeigenschaft ul auf height: auto und opacity: 1, damit die Listenelemente von ul nur beim Schweben mit dem gewissen Übergangseffekt angezeigt werden.

Das folgende Beispiel zeigt, dass das div leer ist und die height von div 0px beträgt. Aber wenn wir mit der Maus über das div fahren, wird die Artikelliste mit ease-in-Effekt angezeigt. Die Option ease-in setzt den langsamen Start des Übergangs. Die Eigenschaft height von div wird zu auto. Wenn wir aus dem div herausschweben, wird es wieder leer.

Beispielcode:

<div>
 <ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Mango</li>
 </ul>
</div>

div {
 border: 1px solid black;
}
div > ul {
 opacity: 0;
 height: 0;
 overflow: hidden;
 transition: opacity 0.6s ease-in;
}
div:hover > ul {
 opacity: 1;
 height: auto;
}