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

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>