：私は次のセットアップを持っている

Question

兄弟の上に、divの上に移動：

<div class="" style="height: 400px !important; 
        width: 100% !important; 
        overflow: hidden;"> 
    <div class="" style="height: 400px !important; 
         width: 100% !important; 
         background-color: red;"> 
    </div> 
    <div class="" style="height: 400px !important; 
         width: 100% !important; 
         background-color: blue;"> 
    </div> 
</div> 

をので、一定の高さを持っているdiv要素が、あります。その内部には同じ高さを持つ2つのdivがあり、その高さはコンテナdivの2倍です。オーバーフローは隠されているので、最初のdivのみが表示されます。

これで、ユーザーが2番目のdivをアニメートして移動するのを待って、2番目のdivが最初のdivを現在隠しているようにしたいと考えています。引き返すと、私はすべてを元に戻したい。

私はこのようなことをどうやって行うのですか？

Answer 1

これにはCSS変換を使用できます。コンテナdivをホバリングすると、内部divに変換が適用されます。

移行ルールは、ホバーの開始および停止時の位置の変化を表示するために使用されます。

.container { 
 
    height: 400px; 
 
    overflow: hidden; 
 
} 
 

 
.container:hover .inner-2 { 
 
    transform: translateY(-100%); 
 
} 
 

 
.inner { 
 
    height: 100%; 
 
    transition: transform .6s ease-in-out; 
 
} 
 

 
.inner-1 { 
 
    background-color: rgba(255,0,0,.5); 
 
} 
 

 
.inner-2 { 
 
    background-color: rgba(0,0,255,.5); 
 
}

<div class="container"> 
 
    <div class="inner inner-1"></div> 
 
    <div class="inner inner-2"></div> 
 
</div>

JSFiddle

それは、この方法は、要素の絶対配置を示唆しているまたはその余白を変更する回答より集中はるかに少ないプロセッサであることは注目に値するだともはるかに滑らかな遷移をもたらすであろう。

出典：https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/とhttps://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Answer 2

あなたは、コンテナをオーバーフロー時に素敵なアニメーションを達するために、そのハード、ちょうどホバー上でそれらを交換以下のコード：

CSS

デフォルトの状態

div>div:first-child { 
     display: block; 
    } 

    div>div:last-child { 
     display: none; 
    } 

ホバー状態

div:hover>div:first-child { 
     display: none; 
    } 

    div:hover>div:last-child { 
     display: block; 
    } 

別の高さ上昇

div { 
 
    position: relative; 
 
} 
 

 
div>div:first-child { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    
 
} 
 

 
div>div:last-child { 
 
    left: 0; 
 
    bottom: 0; 
 
    position: absolute; 
 
    height: 0 !important; 
 
    z-index: 1; 
 
    transition: height .5s linear; 
 
} 
 

 
div:hover>div:last-child { 
 
    height: 400px !important; 
 
}

<div class="" style="height:400px !important; width:100% !important; overflow:hidden;"> 
 
     <div class="" style="height:400px; width:100% !important; background-color: red;"> 
 
     </div> 
 

 
     <div class="" style="height:400px; width:100% !important; background-color: blue;"> 
 
     </div> 
 
    </div>

Answer 3

はい、あなたは正しい軌道に乗っています。私はinline stylesを使用しないことをお勧めしますが、代わりにclassesとCSS markupを使用してください。

たとえば、オフセットの余白を使用できます。これはCSS transitionsを使用してアニメ化できます。
私はこれを以下に示します。

.parent { 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
.parent:hover .child:first-child { 
 
    margin-top: -100px; 
 
} 
 

 
.child { 
 
    height: 100px; 
 
    transition: margin-top 1s; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
}

<div class="parent"> 
 
    <div class="child red"> 
 
    </div> 
 
    <div class="child blue"> 
 
    </div> 
 
</div>

Answer 4

あなただけではCSSを使用することができ、これを達成するために。あなたが持っている別のdivに子divをラップしている場合、それコンテナdivが推移したときのアニメーションmargin-top、このようなものです：

.container { 
 
    height: 400px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.child { 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 
.slide { 
 
    margin-top: 0; 
 
    transition: margin 0.3s; 
 
} 
 
.container:hover .slide { margin-top: -400px; } 
 
.child.red { background-color: red; } 
 
.child.blue { background-color: blue; }

<div class="container"> 
 
    <div class="slide"> 
 
    <div class="child red"></div> 
 
    <div class="child blue"></div> 
 
    </div> 
 
</div>

が

はまたあなただけの最初のdivのheightを縮小することができますが、これは、その要素の内容に応じて、オーバーフローの問題を引き起こす可能性があります。

.container { 
 
    height: 400px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.child { 
 
    height: 400px; 
 
    width: 100%; 
 
    transition: height 0.3s; 
 
} 
 
.container:hover :first-child { height: 0; } 
 
.child.red { background-color: red; } 
 
.child.blue { background-color: blue; }

<div class="container"> 
 
    <div class="child red"></div> 
 
    <div class="child blue"></div> 
 
</div>

Answer 5

はここで容器の底部内側のdivが比較的positioで働い Fiddle

HTML

<div class="container" style="height:400px !important; width:100% !important; overflow:hidden;"> 
    <div class="top" style="height:400px !important; width:100% !important; background-color: red;"> 
    </div> 

    <div class="bottom" style="height:400px !important; width:100% !important; background-color: blue;"> 
    </div> 
</div> 

CSS

.container:hover .bottom{ 
    top: -400px; 
} 

.bottom{ 
    position: relative; 
    top: 0px; 
    transition-property: top; 
    transition-duration: 1s; 
} 

ですコンテナがホバー状態になったら上に移動します。