Vuetify: add animation when updating grid size - vuetify.js

Question

My component separated to two parts (leftPanel and rightPanel).
When the app start, only leftPanel will be shown, and take up the whole screen width (using xs12).
If user click the button, the left panel will be shown, and rightPanel will resize to xs6 to take up half of the screen.
The functionality here is working well, but I would like to add animation(transition) when the panels size are changing.
I tried to add with different css, but none of them are showing animation.
<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

If you're using an v-if statement it is not possible to solve with CSS. As the element isn't rendered at all. Setting the width initially to 0 or using v-show you probably could solve it with CSS, but I would recommend to look to the vue-transitions: https://v2.vuejs.org/v2/guide/transitions.html
Maybe also to https://vuetifyjs.com/en/styles/transitions with I wonder if you could solve yout problem with the vuetify transitions