Javascript toogle vue的css过渡结束效果

当它变大时，我做了一个盒子转换，我如何使它在闭合时仍然有相同的转换效果，因为它会急剧闭合

<template>
  <div class="hello">
    <div @click="biggerbox = !biggerbox;" class="box" :class="{'biggerbox':biggerbox}"></div>
  </div>
</template>

导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
biggerbox:错误
};
}
};

.盒子{
背景色：红色；
高度：80px；
宽度：90px；
}
比格博克斯先生{
背景色：红色；
高度：180像素；
宽度：190px；
显示器：flex；
过渡时间：1s；
过渡时间功能：轻松；
}

这是指向代码沙盒的链接

---

您应该将转换属性添加到

.box

类中，如下所示：

.box {
  background-color: red;
  height: 80px;
  width: 90px;

  transition: width 1s ease, height 1s ease;
}

这样做是因为无论状态如何，该类都存在，因此在删除另一个类时转换仍然存在

这里有一个额外提示：您可以在元素上使用一个类属性，如下所示：

<div
  @click="biggerbox = !biggerbox;"
  :class="['box', {'biggerbox':biggerbox}]"
/>

---

您应该将转换属性添加到

.box

类中，如下所示：

.box {
  background-color: red;
  height: 80px;
  width: 90px;

  transition: width 1s ease, height 1s ease;
}

这样做是因为无论状态如何，该类都存在，因此在删除另一个类时转换仍然存在

这里有一个额外提示：您可以在元素上使用一个类属性，如下所示：

<div
  @click="biggerbox = !biggerbox;"
  :class="['box', {'biggerbox':biggerbox}]"
/>

---

您的问题是，当您删除.biggerbox类时，您将丢失转换

只需将转换添加到.box类即可

.box {
  transition: all 1s ease;
  background-color: red;
  height: 80px;
  width: 90px;
}

---

您的问题是，当您删除.biggerbox类时，您将丢失转换

只需将转换添加到.box类即可

.box {
  transition: all 1s ease;
  background-color: red;
  height: 80px;
  width: 90px;
}