ハードコーディングの高さなしでVue.jsトランジションを使用するにはどうすればよいですか？

Question

ボタンクリックで拡大縮小する必要のある要素を持つVueアプリがあります。エフェクトをアニメーション化する必要があります。私はこのために<transition>タグを使用していますが、CSSの要素のheightプロパティをハードコードしない限り動作しません。要素に動的データが含まれており、高さが変化するため、これは機能しません。ここで

は私のコードです：ここでは

<template> 
    <input type="button" value="Toggle" v-on:click="showIt = !showIt"/> 
    <transition name="test-tran"> 
     <div class="test-block" v-show="showIt"> 
      <div v-for="item in items">{{ item }}</div> 
     </div> 
    </transition> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       showIt: false 
      }; 
     } 
    } 
</script> 

は、対応するCSSです：heightプロパティなし

.test-block { 
    /* 
    adding a height makes the transition work but 
    an accurate height can't be known ahead of time 

    height: 100px; 
    */ 
} 

.test-tran-enter-active { 
    transition: all .5s ease; 
} 

.test-tran-leave-active { 
    transition: all .5s ease; 
} 

.test-tran-enter, .test-tran-leave-to 
    height: 0; 
} 

.test-tran-leave, .test-tran-enter-to 
    /* 
    adding a height makes the transition work but 
    an accurate height can't be known ahead of time 

    height: 100px; 
    */ 
} 

、要素が表示され、正しく非表示になりますが、何のアニメーションはありません。それはちょうど現れ、瞬時に消える。

CSSの高さをハードコーディングせずにアニメーションを動作させるにはどうしたらよいですか？

Answer 1

いいえ、それは純粋なCSSの問題です。作業高への移行を提供する必要があります。あなたはハッキーな方法でそれを解決することができます。

How can I transition height: 0; to height: auto; using CSS?