Плавные переходы по сетке в Vuetify

Question

Я пытаюсь показать / скрыть элементы сетки, используя vuetify, но не могу заставить их хорошо играть с переходами.В приведенном ниже коде я пытаюсь плавно скрыть и показать столбец, а синий участок скользит позади.Вместо этого красные переходы, а затем синий, когда элемент удаляется.

      <v-layout row>
        <transition name="slide-x-transition">
        <v-flex v-if="showRed" xs4 style="background-color:red">
        </v-flex>
        </transition>
        <v-flex style="background-color:blue"> <!--Doesn't smoothly fill in-->
          <v-btn @click="showRed = !showRed">HIDE/SHOW</v-btn>
        </v-flex>
      </v-layout>

Аналогично, с белым / зеленым я хочу, чтобы гибкие боксы плавно переходили, но вместо этого я получаю плавный переход.анимация для содержимого и полей сразу после его завершения.

https://codepen.io/anon/pen/YRVoqj