gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 21:33:07 25 4
gpt4 key购买 nike

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

最佳答案

您可以使用 v-expand-transition来自 Vuetify: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>
代码沙盒上的工作示例: https://codesandbox.io/s/stack-overflow-q46305305-4qq4940x5w

关于animation - Vuetify.js - 动态卡片高度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46305305/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com