这个transition为什么没有变化？

Question

点击没有反应

<template>
  <div id="app">
      <button @click="show = !show">变变变</button>
      <div style="width: 100px;height: 100px;background-color: blue;" :class="{'active': show}"></div>
  </div>
</template>

<script>
export default {
  name: '',
  data: function(){
    return {
      show: true
    }
  }
}
</script>

<style scoped>
  .active{
    width:300px;
    transition: width 2s;
    -moz-transition: width 2s;
    -webkit-transition: width 2s;
    -o-transition: width 2s;
  }
</style>

Answer 1

换成这样可以实现效果

<template>
  <div id="app">
    <button @click="show = !show">变变变</button>
    <div :class="[show ? 'active' : 'box']"></div>
  </div>
</template>

<script>
export default {
  name: "",
  data: function () {
    return {
      show: true,
    };
  },
};
</script>

<style scoped>
.active {
  width: 300px !important;
  height: 100px;
  transition: width 2s !important;
  -moz-transition: width 2s !important;
  -webkit-transition: width 2s !important;
  -o-transition: width 2s !important;
  background-color: blue;
}
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>

Answer 2

内联样式权重高于class,width没有变化