在没有设置div初始宽高度或结束宽高度数值的情况下，如何让变化div宽高度实现过度动画transition效果，用interpolate-size: allow-keywords即可实现

<template>
  <div :class="$options.name">
    <el-button @click="changeSize = !changeSize">切换尺寸</el-button>
    <div class="height-box" :changeSize="changeSize"></div>
  </div>
</template>
<script>
export default {
  name: `interpolate-size`,
  data() {
    return {
      changeSize: false,
    };
  },
};
</script>
<style lang="scss" scoped>
.interpolate-size {
  width: 200px;
  .height-box {
    interpolate-size: allow-keywords; //支持没有明确数值的宽高transition过度效果

    transition: 0.2s;
    background-color: #f56c6c;

    &[changeSize] {
      width: 100px;
      height: 100px;
    }
  }
}
</style>