How to toggle/untoggle slide while updating class in VueJS?

Hi I'm new to VueJS and I'm trying to achieve the following thing :

I have a table that is closed and I want to deploy it on click and revert the sign on the triggering button.

So far I've only managed to make it suddenly pop-up on click but had no luck with any kind of transition or changing content...

I've made a JSFiddle with everything I've done so far : https://jsfiddle.net/p5z7skqa/

Javascript, CSS and HTML :

new Vue({
  el: "#cart-app",
  data: function () {
    return {
      opened: false
    }
  },
  methods: {
    openRecap: function() {
      this.opened = !this.opened
    }
  },
})

.cart-app {
  width: 100%;

  &.open {
    height: auto;
  }
}

.cart-app-mobile-up {
  align-items: center;
  background: blue;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  color: white;
  display: flex;
  font-size: 35px;
  height: 35px;
  justify-content: center;
  margin: 0 auto -2px;
  padding-top: 15px;
  width: 70px;
}

.cart-app-sticky {
  position: fixed;
  bottom: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="cart-app" class="cart-app cart-app-sticky " :class="{'open': this.opened}">
  <div :class="{'open-cart-recap': this.opened}" class="cart-app-mobile-up" @click="openRecap()">&bigtriangleup;</div>
  <div class="cart-app-title">Récapitulatif de votre commande</div>
  <div class="cart-app-combinations" v-if="opened">
    <ul class="cart-app-combinations-title list-unstyled">
        <li>Produits</li>
        <li></li>
        <li class="text-right">Taille</li>
        <li class="text-right">P.U.</li>
        <li class="text-right">Qté</li>
        <li class="text-right">Prix HT</li>
        <li class="sr-only">Actions</li>
    </ul>

    <table>
      <tr>
        <td>test1</td>
      </tr>
       <tr>
        <td>test2</td>
      </tr>
      <tr>
        <td>test3</td>
      </tr>
      <tr>
        <td>test4</td>
      </tr>
    </table>
  </div>
</div>

Main issue I got with the transition part is that, it was either going the wrong way or no animating the movement of the trigger button.

Any help would be gladly appreciated, thanks in advance.

from How to toggle/untoggle slide while updating class in VueJS?