Vuetify:在更新网格大小时添加动画

Question

我的组件分为两部分(leftPanel和rightPanel(。
当应用程序启动时，将仅显示leftPanel，并占用整个屏幕宽度(使用xs12(。
如果用户单击该按钮，将显示左侧面板，右侧面板将调整为 xs6 以占据屏幕的一半。
这里的功能运行良好，但我想在面板尺寸发生变化时添加动画(过渡(。
我尝试使用不同的 css 添加，但它们都没有显示动画。

<template>
<v-container grid-list-sm fluid>
<transition name="MyPanel">
<v-layout align-space-around row fill-height>
<v-flex id="leftPanel" :xs6="!showRightPanel" :xs12="showRightPanel">
<v-layout align-space-around column fill-height>
<v-flex xs12>
<v-btn v-if="extendable" @click="openRightPanel"> show more information </v-btn>
</v-flex>
</v-layout>
</v-flex>
<v-flex id="rightPanel" v-if="showRelatedCard" xs6>
<v-layout align-space-around column fill-height>
...
</v-layout>
</v-flex>
</v-layout>
</transition>
</v-container>
</template>
<script>
export default {
...
data() {
return {
showRightPanel : false
}
},
methods: {
removeLargeImage() {
this.showRightPanel = !this.showRightPanel;
}
}
};
</script>
<style scoped>
...
</style>

Answer 1

如果你使用的是 v-if 语句，则无法使用 CSS 求解。因为元素根本没有呈现。将宽度最初设置为 0 或使用 v-show 您可能可以使用 CSS 解决它，但我建议查看 vue-transitions：https://v2.vuejs.org/v2/guide/transitions.html

也许也 https://vuetifyjs.com/en/styles/transitions 我想知道你是否可以解决你的问题 vuetify 过渡