Vuetify.js

Question

我在 v-card 中有两个段落（一大一小），它会打开按钮点击。有没有办法让卡片在切换时像在扩展一样动画。这是它的样子

<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对象中定义的变量。

Answer 1

您可以使用 Vuetify 中的 v-expand-transition：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

Vuetify.js - 动态卡片高度动画

Vuetify.js - dynamic card height animation

animation

css-transitions

vuejs2