Okay, das verursacht mir viele Probleme.
Wenn Sie den css3 -webkit-transform Stil mit jeder Art von 3D Rotation verwenden (wie zB rotateY(30deg) ), ist es extrem unzuverlässig ein Klick-Ereignis an dieses rotierte Objekt zu binden.
Siehe den Beispielcode unten oder sieh dir diese Geige an (um die Unzuverlässigkeit in der Geige zu sehen, klicke auf die rechte Seite von das Element). Dieses Beispiel hat keine Animation, ist aber immer noch betroffen.
html:
%Vor%css:
%Vor%jquery:
%Vor%Was ich mit "unzuverlässig" meine, ist, dass das click-Ereignis nicht immer ausgelöst wird (abhängig davon, wo Sie es anklicken), und manchmal wird das Ereignis überhaupt nicht ausgelöst (egal, wo Sie es anklicken).
Gibt es eine Möglichkeit, dies zu beheben oder zu vermeiden, so dass es mit CSS3-Elementen funktioniert, während es gedreht und animiert wird?
Aktualisierung:
Die Verwendung der CSS-Eigenschaft 'float: left' auf dem Element scheint es zu ermöglichen, Klickereignisse richtig zu erkennen *, während sie sich nicht in Bewegung befinden . Weiß jemand, warum die Eigenschaft float dies behebt?
Mein ultimatives Ziel ist, dass das Objekt während der Bewegung Klickereignisse erhält. Wenn ich jedoch eine neue CSS3-Eigenschaft rotate3d (live, bei einem anderen jquery-Ereignis) anwende, um das Objekt zu animieren, beginnt das Klickereignis erneut.
Ich kann das Problem anscheinend nicht reproduzieren, es scheint nach dem Hinzufügen von float:left; korrekt zu funktionieren.
Manchmal verhalten sich Browser witzig beim Rendern der tatsächlichen Breite eines HTML-Elements. float:left scheint die Browser besser berechnen zu lassen.
Dies ist das JavaScript:
%Vor%Hier ist eine aktualisierte Geige mit der Animation, es scheint zu funktionieren: Ссылка
(Ich habe console.log auf hover hinzugefügt, um das Leben einfacher zu machen;))
Tags und Links html jquery css3 transform jquery-animate