Ich habe ein div, auf das ich klicke, um es zu ziehen. Sobald es auf einem Gebiet ist, animiert es zu seiner Position über:
%Vor%Ich kann es auch animieren mit:
%Vor%Der Unterschied ist; mit jQuery animiert es auf 200px von der linken Seite des Dokuments. Mit CSS3 animiert es 200px von wo Sie es fallen lassen (was schlecht ist)
Gibt es eine Möglichkeit, CSS3 von oben links im Dokument animieren zu lassen, wie es jQuery tut? Ich habe versucht, transform-Herkunft und ein paar andere Einstellungen ohne Glück zu ändern.
Ich bin kein Experte in CSS3-Transformationen, aber ich denke, dass translate relativ zur ursprünglichen Position des Elements ist.
Eine Möglichkeit, mit CSS zu erreichen, was Sie wollen, wäre, das Element absolut zu positionieren und mit einem CSS3 transition die Eigenschaften left und top zu ändern.
Hier ist eine Geige: Ссылка
HTML:
%Vor%CSS:
%Vor%jQuery:
%Vor% Der Zweck von JS besteht darin, dem Element move class hinzuzufügen, wenn darauf geklickt wird.
Bitte korrigieren Sie mich, wenn ich falsch liege, aber der Grund, warum Sie CSS3-Animationen verwenden möchten, ist, weil jQuery-Animationen nicht das tun, was die CSS3-Animationen können?
Wenn ich richtig liege, dann schau dir dieses jQuery-Plugin mit dem Namen .transit an, das erlaubt Sie können alle CSS3-Animationen auf alle Selektoren anwenden, wie sie im CSS3-Format angewendet wurden, aber dies geschieht über programmgesteuerte jQuery-Methoden.
Dieses Plugin behandelt viele CSS3 Schiebe- und Bewegungsanforderungen und alle anderen CSS3-Animationen, die Sie darauf werfen können. Der obige Link enthält Beispiele auf der ganzen Seite.
Wenn dies nicht gewünscht wird, kann CSS nicht "erkennen", wenn ein Objekt in ein anderes Element "fallengelassen" wird. Es gibt den :hover Pseudo-Trigger, der aber jedes Mal ausgelöst wird, wenn egal was ist.
Tags und Links jquery css css3 css-transforms jquery-animate