Ich habe ein Mockup erstellt, um mein Problem zu demonstrieren. Ich fürchte, die Lösung fällt in das, was ich mit dem ersten Beispiel getan habe (Box1).
Ich bin mir nicht sicher, warum ich eine CSS-Transformation nicht auf ein Elternelement anwenden kann und es nicht auf das Kindelement anwenden oder zumindest überschreiben soll.
Lassen Sie mich wissen, ob es eine Möglichkeit gibt, den Effekt des ersten Beispiels mit der Transform-Eigenschaft zu erzielen. Ich möchte nicht, dass das zweite Bild ebenfalls skaliert wird. Nur das Elternteil div.
Hinweis
Ich versuche, diese Eigenschaft zu verwenden, um GPU-Beschleunigung zu aktivieren.
Ich wollte -transformieren, um die GPU-Performance zu verbessern. Ich schätze, ich werde weiterhin die Breitenanimation verwenden: Ссылка , aber mit einer css3-Eigenschaft, die die GPU-Beschleunigung aktivieren würde.
Habe damit in keinem anderen Browser als dem chrome gespielt.
Aber es sieht so aus, als ob der Overflow-Versteckte-Satz für das Eltern-Element die Größe der Vererbung für das Bild ändert.
Wenn Sie also in den Feldern, auf die die Animation angewendet wird, den automatischen Überlauf festlegen, sollte die Verkleinerung der Größe korrigiert werden.
Ссылка testet den Überlauf auf auto, der die Bilddimensionen im Takt hält.
Um semantisch zu sein, glaube ich nicht, dass Sie in der Lage sein sollten, es davon abzuhalten, ein Kindelement zu transformieren, indem Sie es transformieren / skalieren, es nicht skalieren. Eine Transformation animiert nicht nur die Breite wie in Beispiel 1, sondern skaliert das x.
Ich glaube, dass es bei dieser Frage darum geht, durch die Verwendung von Funktionen, mit denen die GPU Animationen verarbeiten kann, einen Leistungsschub zu erzielen. Dies ist möglich, glaube ich, indem ich die Elemente effektiv als ein Bild behandle, das die GPU dann animiert. Daher ist es nicht möglich, ein Element zu haben, das dynamisch seine Größe / Form während einer Animation behält. Vielleicht gibt es eine Möglichkeit, der Animation entgegenzuwirken, indem man das Element, das man statisch behalten möchte, transformiert, aber dies wird wahrscheinlich weder effizient noch effektiv sein.
Hinweis : Ich bin nicht sehr versiert in der Technologie, die Webkit zum Rendern dieser Transformationen verwendet. Es tut mir leid, wenn die feineren Details des Renderings nicht ganz genau sind. Ich werde dies aktualisieren, wenn jemand mit einer besseren Beschreibung der Funktionsweise von transform kommentiert.