Mit CSS translateY()

Ich mich bewege ein element aus (browser-Höhe + element Höhe)px in Richtung der Oberseite des browser -50px der browser mit CSS-keyframes und das funktioniert, aber das problem ist, es ist hinterher und ich bin mir wohl bewusst, dass die Verwendung von translateY würde dieses Problem beheben.

Nun an ich habe eine CSS wie folgt.

.bubble
{
    -webkit-transition: -webkit-transform 1s ease-in-out;
}

.bubble.move
{
    -webkit-transform: translateY(-50px);
}

Als das element ist unterhalb des browser-Bildschirm (browser-Höhe + element Höhe)px und ich möchte es zu bewegen an der Spitze der Bildschirm -50px, das nicht funktioniert. Es bewegt gerade das element, das den von seiner aktuellen position zu der -von 50px, die aktuelle position, die ist nicht vorgesehen. Wie kann ich Fragen, übergänge gehen -50px des Browsers und nicht er-element?

InformationsquelleAutor Neutralizer | 2011-10-02

  1. -2

    Verwendung von javascript berechnen und setzen der css mit javascript zu

    Das ist die option, aber ich hatte den Eindruck, dass CSS allein konnte das
    Ich habe gefragt, die gleiche Frage vor einiger Zeit, und Sie können nur ein element, ein x Anzahl der Pixel. Sie können nicht sagen, es zu gehen zu bestimmten Koordinaten. (das ist wirklich schade). So für jetzt, bis css4 veröffentlicht wird, werden Sie haben, javascript zu verwenden :).
    auch eine weitere Sache, gibt es einen Unterschied zwischen translateY() und translate3d()? Wenn das letztere verwendet wird, wie können wir bitten, es zu ignorieren, X-und Z-Werte für Y zu arbeiten?
    setze Sie einfach auf 0. aber eigentlich gibt es keinen Unterschied. translateY ist nur ein Unterbereich von translate3D.

    InformationsquelleAutor cmplieger

  2. 2

    Übersetzen ist nicht, was Sie suchen. Sie möchten die position das element absolut und setzen den übergang auf die top-Eigenschaft. So etwas wie:

    .bubble {
  position:absolute;
  top:100%;
  transition:top 1s ease-in-out;
}
.bubble.move {
  top:50px;
}

    Einzige schlechte Teil über diesen Ansatz ist, dass der Körper braucht, um das Elternelement des .bubble. Ich verließ aus vendor-Präfixe, weil ich Sie hasse.

    InformationsquelleAutor mike.pj

  3. -1

    Haben Sie versucht, die Positionierung der element absolut statt relativ?

    Ja habe nie versucht mit der relativen position und es ist einfach absolut ab

    InformationsquelleAutor Sneakyness

Schreibe einen Kommentar