JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>

<div id="app">
  <div>
    <button @click="toggle(1)">toggle instant</button>
    <button @click="toggle(0)">toggle with animation</button>
  </div>
  <div class="xxx" :class="{ toggled, instant }"></div>
</div>

CSS

.xxx {
  transition: all 1s;
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

.xxx.toggled {
  width: 150px;
  height: 150px;
  background: blue;
  transform: translateX(100px);
}

.xxx.instant {
  transition-duration: 0ms;
}

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    instant: false,
    toggled: false,
  }),
  methods: {
    toggle(instant) {
      this.instant = !!instant;
      this.toggled = !this.toggled;
    },
  },
});