divを大きくし、大きなセクションを上に移動します。

Question

divを上に移動したときにdivを上にアニメーションしようとしています。

アニメーションを大きくすることができますが、アニメーションは下向きです。私はdivの底を同じ場所にとどまらせようとしており、divのサイズを上に滑らかにアニメーション化しています。

See jsfiddle here whichは、現在私のコードが行っていることを示しています。以下

参照してくださいコード：

.box { 
 
    height: 170px; 
 
    padding-bottom: 15px; 
 
    width: 50%; 
 
} 
 

 
.content { 
 
    background-color: #e3e4e6; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.content:hover { 
 
    height: 110%; 
 
}

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

Answer 1

これはtransform:scaleY()を使用し、transform-originをbottomに設定します。私はまた、効果をより良く見るためにmargin-top：100pxを置く。また、transitionを使って縮尺をスムーズにすることができます

また、テキストの縮尺を変更する必要があります。

はこちらをご覧ください：jsfiddle

あなたが戻って、それはあなたがdiv要素をスケーリング同じ時間で元の状態だと、テキストを拡張する必要があります。あなたがdivを2倍にスケールするならば。 1/3で縮尺を変えても同じようにテキストを1/2に縮尺する必要があります。1/3で縮尺する場合

この場合、.contentを1.5で拡大するので、1 /1.5 = 0.66

コード：

.box { 
 
    height: 170px; 
 
    padding-bottom: 15px; 
 
    width: 50%; 
 
} 
 

 
.content { 
 
    background-color: #e3e4e6; 
 
    height: 100%; 
 
    text-align: center; 
 
    margin-top: 300px; 
 
    transition:0.3s; 
 
} 
 

 
.content:hover p { 
 
    transform: scaleY(0.66) 
 
} 
 

 
.content:hover { 
 
    transform: scaleY(1.5); 
 
    transform-origin: bottom; 
 
}

<div class="box"> 
 
    <div class="content"> 
 
    <p> 
 
     TEST 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

あなただけのCSSを使用したい場合は、単に使用：

.content:hover { 
    margin-top: -50px; 
    height: 110%; 
} 

が持つjsFiddle

Answer 3

設定しtopプロパティを参照してください。ヴァルheight - 100 * -1

https://jsfiddle.net/x3cL1cpt/7/

.content:hover { 
    height: 110%; 
    top: -10%; 
    position: relative; 
} 

なぜ相対位置のUE？私はボックスを移動するが、ボックスが占有していたスペースを変更することはないからだ。その領域を変更する必要がある場合は、topをmargin-topに変更してください。

Answer 4

拡大するための一番上にある任意のスペースがないので、あなたは最初に余分なマージンを与え、このJsFiddleようホバー上でそれを削除すること -

.box { 
    height: 170px; 
    padding-bottom: 15px; 
    width: 50%; 

} 

.content { 
    background-color: #e3e4e6; 
    height: 100%; 
    text-align: center; 
    margin-top:25px; 
} 

.content:hover { 
    height: 110%; 
    margin-top:0; 
} 

Answer 5

私は他のアイデアを持っていません（このようにそれを試してみてください。 ..）：あなたはクラス "コンテント"よりも大きな高さをクラス "ボックス"に与えることができます（私は赤い枠線を囲んで、それを見ることができます）。その後、flexboxを使って、クラスの "content"を底に置くことができます。その後、ホバリングで上腕を上向きにして埋め替えることができます。トランジションを使用すると、素敵なアニメーションを作成できます。これで十分ですね。おそらく、私はアイデアを持っていない瞬間にjQueryの方法もあります。これがあなたに役立つかどうか私に教えてください（私が質問をうまく理解しているかどうかはわかりません） - 乾杯。 （重要：この高さなどでテストのためだけのランダムな値です）

.box { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    flex-direction: column; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 
.content { 
 
    background-color: #e3e4e6; 
 
    height: 50px; 
 
    width: 100%; 
 
    text-align: center; 
 
    -webkit-transition: height 1s; 
 
    /* Safari */ 
 
    transition: height 1s; 
 
} 
 
.content:hover { 
 
    height: 100%; 
 
}

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

Answer 6

がtransitionを追加するために必要な、あなたの現在と、このCSSを置き換え：

あなたが行うことができます

.box { 
    height: 170px; 
    padding-bottom: 15px; 
    width: 50%; 
} 

.content { 
    background-color: #e3e4e6; 
    height: 100%; 
    text-align: center; 
    transition: 1s all ease; 

} 

.content:hover { 
     transform: scaleY(1.2); 
    transform-origin: bottom right; 
}