SOURCE

new Vue({
  el: '#app',
  data() {
    return {
      isChange: true,
      open: 'open',
      close: 'close'
    }
  },
  methods: {
    change() {
      this.isChange = !this.isChange
    }
  }
})

<div id="app">
  <transition name="fade">
    <div :class="[isChange?open:close]">
      宽度实验
    </div>
  </transition>
  <button @click="change">
    按钮
  </button>
</div>

.open {
  width: 200px;
  background: blue;
}

.close {
  width: 100px;
  background: yellow;
}
.fade-enter-active {
  transition: all 2s;
  background: red;
}
.fade-leave-active {
  transition: all 2s;
  background: black;
}