[Vuejs]-Dynamic names does not work in vuejs

Is this what are you trying to achieve? codepen

Example with slide and fade transitions

<div id="app">
   <button class="btn btn-primary" @click="show = !show">Show Alert</button>                
   <select v-model="alertAnimation" class="form-control my-4">
      <option value="slide">slide</option>
      <option value="fade">fade</option>
   </select>
   <div>
      <div id="app">
         <transition :name="alertAnimation" mode="out-in">
            <h1 v-if="show" key="1">Panel 1</h1>
            <h1 v-if="!show"key="2">Panel 2</h1>
         </transition>
         <transition :name="alertAnimation" mode="out-in">
            <div v-if="show" key="1">
               panel 1
               <a href="#" @click.prevent="show = false">
               Go to the panel 2
               </a>
            </div>
            <div v-if="!show" key="2">
               panel 2
               <a href="#" @click.prevent="show = true">
               &lt; Go back to panel 1
               </a>
            </div>
         </transition>
      </div>
   </div>
</div>