CSS3 Animation, auf Position

übersetzen Ich habe ein div, dass ich klicke, um es zu ziehen. Sobald es auf einem Gebiet ist, belebt es in seine Position über:CSS3 Animation, auf Position

$("#wheel1").animate({left: "200px", top: "100px"});

ich es auch mit animieren bekommen kann:

@-webkit-keyframes wheel1 { 
    0% { 
    } 
    100% { 
     -webkit-transform: translate(200px, 100px); 
    } 
}

Der Unterschied ist; mit jQuery animiert es zu 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 animieren von oben links im Dokument, wie jQuery tut? Ich habe versucht, transform-Herkunft und ein paar andere Einstellungen ohne Glück zu ändern.

Quelle

2012-06-14 Phill

Ich bin mir nicht sicher, wie Margen helfen werden, der jQuery Weg ist schon perfekt, mit CSS3, wie übersetzt man Margen? – Phill

Ich bin nicht sicher, dass Sie das Problem richtig lesen. Die Verwendung von links/rechts ist für jQ in Ordnung. Die jQ-Lösung ist solide und es funktioniert. Ich versuche das gleiche mit CSS3 über CSS-Animation zu erreichen.Margins und Positionen können nicht verwendet werden, es muss translateX/Y sein – Phill

Dies könnte ein relevanter Link im Kontext sein, wie die Transformationen top/left/right/bottom (auch in CSS nicht nur jQuery) von der Verwendung von 'translate' abweichen: ** http: //www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/**] (http://www.paulirish.com/2012/) why-moving-elements-with-translate-ist-besser-als-posabs-topleft /) – Nope

Ich bin kein Experte in CSS3 Transformationen, aber ich denke translate ist relativ zu der ursprünglichen Position des Elements.

Eine Möglichkeit, um zu sehen, was Sie mit CSS erreichen möchten, wäre, das Element absolut zu positionieren, und verwenden Sie ein CSS3 transition, um seine left und top Eigenschaften zu ändern. Hier

ist ein Fiddle: http://jsfiddle.net/nSa9s/2/

HTML:

<div class="box"></div>

CSS:

.box { 
    position: absolute; 
    background: #ff0000; 
    left: 400px; 
    top: 200px; 
    width: 100px; 
    height: 100px; 
    -webkit-transition: all 1.0s linear; 
    -moz-transition: all 1.0s linear; 
    -o-transition: all 1.0s linear; 
    -ms-transition: all 1.0s linear;  
    transition: all 1.0s linear; 
} 
.box.move { 
    left: 200px; 
    top: 100px; 
}

jQuery:

$(document).ready(function() { 
    $('.box').on('click', function() { 
     $(this).addClass('move'); 
    }); 
});

Der Zweck des JS ist hinzuzufügen move Klasse zum Element, wenn darauf geklickt wird.

Quelle

2012-06-14 02:59:20

Bitte korrigieren Sie mich, wenn ich falsch liege, aber der Grund, warum Sie CSS3-Animationen verwenden möchten, ist, weil jQuery Animationen nicht tun, was die CSS3-Animationen tun können?

Wenn ich richtig bin, dann schauen Sie sich dieses jQuery-Plugin mit dem Namen .transit an, mit dem Sie alle CSS3-Animationen auf alle Selektoren wie im CSS3-Format anwenden können, aber mit programmatischen jQuery-Methoden.

Dieses Plugin behandelt viel von CSS3 Schiebe- und Bewegungsanforderungen und alle anderen CSS3-Animationen, die Sie werfen können. Der obige Link enthält Beispiele auf der ganzen Seite.

Wenn dies nicht wollen Sie wollen, realisieren CSS kann nicht "erkennen", wenn ein Objekt in ein anderes Element "abgelegt" wird. Es ist die :hover Pseudo-Trigger, aber das wird jedes Mal egal was auslösen.

Quelle

2012-06-14 04:19:36 arttronics

Ich werde es versuchen, danke. Der Grund, warum ich versuche, CSS3 gegenüber jQuery zu verwenden, ist, dass es effizienter ist. Ich lese, dass es auch die erforderliche Leistung an die GPU anstatt an die CPU abgibt. Ich zweifle nicht daran, als ich einen 7000px Hintergrund von einer Seite des Bildschirms auf die andere übersetzte, tuckerte es mit jQ mit, bewegte sich aber perfekt mit CSS. – Phill

Bitte bezweifeln Sie dies ... Bitte beachten Sie meine [** SO Antwort **] (http://Stackoverflow.com/a/11011569/1195891) für eine reine CSS Animation Sonar Wave FX. Firefox erstickt während Chrome singt. Das heißt, Sie müssen sich den spezifischen Code ansehen, über den Sie sprechen, um zu sehen, warum er in jQuery langsam ist. – arttronics

Entschuldigung, wahrscheinlich hätte ich 'für das iPad' erwähnen sollen. – Phill

FYI, um dies mit CSS-Animationen (nicht Übergänge wie die ausgewählte Antwort zeigt), müssen Sie einfach left in Ihrem Keyframe statt zu übersetzen.

@-webkit-keyframes wheel1 { 
    0% {} 
    100% { 
     left:200px; top: 100px; 
    } 
}

Quelle

2013-03-27 22:06:01 MGA

CSS3 Animation, auf Position

Antwort

Verwandte Themen