web-dev-qa-db-ja.com

トランジションを使用してVuejsのv-ifで高さをアニメーション化する

次のコードを使用して、高さを0pxに減らしてv-if要素をアニメーション化しています。アニメーションは正常に動作します。しかし問題は、要素の初期の高さをCSSに指定することです。 1つの要素ではこれで問題ありませんが、このアニメーションを複数の要素に適用したいと思います。どうすれば修正できますか？高さが何であれ、アニメーションは正常に機能します。

<transition name="fadeHeight" mode="out-in">
<div v-if="something">
<p>something over here where the height is not constant</p>
</div>
</transition>

.fadeHeight-enter-active,
.fadeHeight-leave-active {
  transition: all 0.2s;
  height: 230px;
}
.fadeHeight-enter,
.fadeHeight-leave-to
{
  opacity: 0;
  height: 0px;
}
cssanimationvuejs2vue.js
7
Gijo Varghese

すべてのコードを投稿したようには見えませんが、目標を理解できれば幸いです。

遷移をmax-heightプロパティに移動してみてください。

.fadeHeight-enter-active,
.fadeHeight-leave-active {
  transition: all 0.2s;
  max-height: 230px;
}
.fadeHeight-enter,
.fadeHeight-leave-to
{
  opacity: 0;
  max-height: 0px;
}

最大の高さを最も高い要素よりも大きく設定する限り、必要なことを達成できます。 overflow:hiddenも使用したい場合があることに注意してください。要素の実際の高さの劇的な変化がある場合、アニメーションの継続時間/遅延が非常に異なるように見えるため、この解決策は最適ではない可能性があります。

https://jsfiddle.net/7ap15qq0/4/

24
ryantdecker