Warum schnappen meine transformierten Elemente beim Schweben zurück?

Warum schnappt meine Transformation zurück?

Im Bereich CSS kann die schwer fassbare verschwindende Transformation ein rätselhaftes Phänomen sein. Hier befassen wir uns mit einem konkreten Fall dieses Problems, bei dem die Transformation eines Elements beim Übergang scheinbar rückgängig gemacht wird.

Problem: Transformierende Elemente schnappen zurück

Bedenken Sie das Folgender CSS-Code:

<code class="css">.blockquote {
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

Wenn man mit der Maus über das Blockquote-Element fährt, ist der Effekt seltsam. Während die Transformationsereignisse zunächst tatsächlich ausgelöst werden, schnappen die übersetzten Elemente letztendlich wieder in ihre ursprünglichen Positionen zurück.

Ursache und Lösung

Der Kern dieses Problems liegt in der CSS-Eigenschaft „display“. CSS-Transformationen sind im Allgemeinen nicht mit Elementen kompatibel, die auf display: inline eingestellt sind. Um das Einrastproblem zu lösen, ist es daher notwendig, die Anzeigeeinstellung auf display: inline-block zu ändern.

Unten ist der aktualisierte Code:

<code class="css">.blockquote {
  display: inline-block;
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

Mit dieser Änderung sollte der Übergang erfolgen funktionieren wie erwartet und die Elemente behalten beim Schweben ihre veränderte Position bei.

Das obige ist der detaillierte Inhalt vonWarum schnappen meine transformierten Elemente beim Schweben zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!