vue transitions without having to use v-if / v-show - vue.js

Question

Brief question since I'm new to Vue transitions. My question is if it possible to apply a transition to an element/component without re-rendering it. Hence, not with the use of v-if or v-show. My use case is expanding and shrinking a div component by pressing two different title bar buttons, therefore i don't want the element to be re-rendered upon transition. Thx for answers!
from the code below i want to apply the expand transition when pressing the "maximize" button and reverse the transition with the "minimize button"
<template>
<transition name="expand">
<div>
<div class="title-bar-controls" #mousedown.stop>
<Button aria-label="Minimize" #click="windowToggle('minimize')"></Button>
<Button aria-label="Maximize" #click="windowToggle('maximize')"></Button>
<Button aria-label="Close" #click="hideContainer"></Button>
</div>
</div>
</transition>

Answer 1

Directly binds animation CSS class to your window.
Like below demo (binds minimize or maximize).
new Vue ({
el:'#app',
data () {
return {
classes: ''
}
},
methods: {
windowToggle(name) {
this.classes = name
}
}
})
#keyframes animate-minimize {
from {width: 400px; height: 400px;}
to {width: 0px; height: 0px;}
}
#keyframes animate-maximize {
from {width: 0px; height: 0px;}
to {width: 400px; height: 400px;}
}
.minimize {
width: 0px;
height: 0px;
animation-name: animate-minimize;
animation-duration: 2s;
border:solid 1px;
}
.maximize {
width: 400px;
height: 400px;
animation-name: animate-maximize;
animation-duration: 2s;
border:solid 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div>
<div class="title-bar-controls" #mousedown.stop>
<Button aria-label="Minimize" #click="windowToggle('minimize')">-</Button>
<Button aria-label="Maximize" #click="windowToggle('maximize')">[]</Button>
<div :class="classes">
</div>
</div>
</div>
</div>