CSS-Übergang für die Eigenschaft "lotrecht ausrichten"

Question

Wie kann ich ein div erstellen, das vertikal ausgerichtet ist: top, ändere seine Position in "vertikal ausrichten": Mitte, aber einen weichen animierten Übergang durch diese Zustände?

Ich kann es nicht zur Arbeit, ist vertikal ausgerichtet nicht übergangsweise?

Code:

.outer{ 
    width:200px; 
    height:200px; 
    background:red; 
    display:table; 
    text-align:center; 
} 

.inner{ 
    width:100px; 
    height:100px; 
    vertical-align:bottom; 
    display:table-cell; 
    transition:all 2s; 
} 

.inner:hover{ 
    vertical-align:middle; 
} 

Hier ist die Geige: https://jsfiddle.net/7amp783t/

Answer 1

Ich glaube, Sie haben JQuery zu verwenden, um eine gleitende Animation zu erstellen. Sie können hierzu die jQuery-Funktion toogle verwenden. http://api.jquery.com/toggle/

http://api.jquery.com/slidetoggle/

Answer 2

Versuchen statt vertikal transformieren sie Mitte ausrichten. Dieser Code wird dasselbe tun, was Sie erreichen möchten. Ändern Sie Ihre Hover-Zustand translateY (-50%)

Working Demo

.outer{ 
    width:200px; 
    height:200px; 
    background:red; 
    display:table; 
    text-align:center; 
} 

.inner{ 
    width:100px; 
    height:100px; 
    vertical-align:bottom; 
    display:table-cell; 
    transition:all 2s; 
} 

.inner:hover{ 
    transform: translateY(-50%); 
} 

Answer 3

Statt Änderung der vertical-align Eigenschaft enthalten, verwenden transform: translateY() nach oben und nach unten.

Ich habe eine Geige hatte und bekam diesen Code zu arbeiten:

.outer{ 
    width:200px; 
    height:200px; 
    background:red; 
    display:table; 
    text-align:center; 
} 

.inner{ 
    width:100px; 
    height:100px; 
    display:table-cell; 
    vertical-align: bottom; 
    transition: all 2s ease-in-out; 
} 

.inner:hover{ 
    transform: translateY(-50%); 
} 

Die translateY(-50%) bewegt den Text „nach oben“ (daher der -) um 50% der Höhe des übergeordneten Box.

BEARBEITEN Sie müssen sich keine Gedanken über die Einstellung position: relative des übergeordneten div. Ich habe es aus Gründen der Klarheit entfernt.

Ich habe aktualisiert your JSFiddle, auch.

Answer 4

kann u Dieses Beispiel Versuchen:

die Transformation unter Verwendung von: translateY (-50%); Methode css vertical align animation

.block { 
background: orange; 
height: 500px; 


} 
.centered { 
    text-align: center; 
    background: pink; 
    position: relative; 
    top: 0; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
} 
.block:hover .centered { 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
    top: 50%; 
} 

lassen Sie mich wissen, wenn u weitere

Answer 5

Hilfe benötigen, wenn Sie vertical-align verwenden möchten, können Sie nicht in einer Tabellenzelle, aber mit 2 Elementen nebeneinander verwendet werden soll, Hier können Sie Werte für die von ihnen erzeugte Linienhöhe festlegen. In diesem Fall kann die vertikale Ausrichtung viele vordefinierte Werte oder numerische Werte annehmen.

https://www.w3.org/wiki/CSS/Properties/vertical-align#Values

Da Ihr Beispiel eine Höhe von 200 Pixel gibt, können wir um diese spielen: https://jsfiddle.net/7amp783t/5/

.outer{ 
 
    font-size:18px;/* whatever */ 
 
    width:200px; 
 
    height:200px; 
 
    background:red; 
 
    text-align:center; 
 
} 
 
.outer:before { 
 
    content:''; 
 
    display:inline-block; 
 
    height:100%;/* here the line is 100% height of container: set to 200px */ 
 
    vertical-align:calc(-200px + 1em); /*chrome instead bottom */ 
 
} 
 
.inner{ 
 
    vertical-align:0;/* from bottom : calc(-200px + 2em) go all the way down minus room for text */; 
 
    display:inline-block; 
 
    transition:all 2s; 
 
} 
 

 
.outer:hover .inner{/* outer, else you need to follow inner */ 
 
    vertical-align:calc(-100px + 1em);/* lets go half way */ 
 
    }

<div class="outer"> 
 
    <div class="inner"> 
 
    Hover me box 
 
    </div> 
 

 
</div>

Answer 6

position: relative eine einfache Möglichkeit, sein kann :

.outer { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    display: table; 
 
    text-align: center; 
 
} 
 
.inner { 
 
    position: relative; 
 
    top: 0; 
 
    display: table-cell; 
 
    transition: all 2s; 
 
} 
 
.inner:hover { 
 
    top: 50%; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    Hover me 
 
    </div> 
 
</div>

Answer 7

CSS Transitions definiert vertical-align als animierbaren, aber nur dann, wenn zwischen zwei Längenwerte interpoliert werden.

┌────────────────┬───────────┐ 
│ Property Name │ Type  │ 
├────────────────┼───────────┤ 
│ vertical-align │ as length │ 
└────────────────┴───────────┘

deshalb Übergänge zwischen bottom und middle nicht glatt sein.

Wenn Sie vertical-align verwenden, um ein Inline-Level-Element relativ zu seiner Line-Box auszurichten, können Sie Längenwerte verwenden.

Sie verwenden es jedoch für eine Tabellenzelle, die ein anderes Verhalten aufweist, wie in Table height algorithms definiert. Insbesondere gelten Längenwerte nicht für Tabellenzellen.