Vuetify.js - 동적 카드 높이 애니메이션

Vuetify.js - 동적 카드 높이 애니메이션

v-card에 2개의 단락(큰 단락과 작은 단락)이 있어 버튼을 클릭할 수 있습니다.전환 중에 카드를 펼치는 것처럼 애니메이션을 할 수 있는 방법이 있습니까?이렇게 보입니다.

<v-card>

   <v-btn @click="show=!show" flat>show</v-btn>

   <v-card-text v-show="show">
      <!-- short paragraph -->
   </v-card-text>

   <v-card-text v-show="!show">
       <!-- long paragraph -->
   </v-card-text>

</v-card>

추정하다show는 vue 객체에 정의되어 있는 변수입니다.

사용할 수 있습니다.v-expand-transitionVuetify에서 : https://vuetifyjs.com/en/framework/transitions#expand-transition 를 참조해 주세요.

하나만 사용하세요.v-card-text포함div짧은 단락과 긴 단락 각각에 대해 그리고 각각으로 포장합니다.v-expand-transition

    <v-card-text>
      <v-expand-transition>
        <div v-show="show">This is a short paragraph</div>
      </v-expand-transition>
      <v-expand-transition>
        <div v-show="!show">
          <p>A looooong</p>
          <p>paragraph</p>
        </div>
      </v-expand-transition>
    </v-card-text>

Code Sandbox의 작업 예: https://codesandbox.io/s/stack-overflow-q46305305-4qq4940x5w

언급URL : https://stackoverflow.com/questions/46305305/vuetify-js-dynamic-card-height-animation