Question

当它变大时，我进行了盒式过渡，但是如何使它对闭合具有相同的过渡效果，因为它急剧闭合。

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

<script>
export default {
  name: "HelloWorld",

  data() {
    return {
      biggerbox: false
    };
  }
};
</script>

<style scoped>
.box {
  background-color: red;
  height: 80px;
  width: 90px;
}

.biggerbox {
  background-color: red;
  height: 180px;
  width: 190px;
  display: flex;
   transition-duration: 1s;
  transition-timing-function: ease;
}
</style>

这是代码沙箱的链接 https://codesandbox.io/s/focused-dew-0pm34?file=/src/components/HelloWorld.vue:338-582

Answer 1

您应该像这样将过渡属性添加到.box类中：

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

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

之所以要执行此操作，是因为无论状态如何，这都是一个类，因此在删除另一个类时仍然存在过渡。

这是一个额外的提示：您可以像这样在元素上使用单个class属性：

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

Answer 2

您的问题是，当您删除.biggerbox类时，您会丢失过渡。

只需将过渡添加到.box类

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

CSS过渡结束效果，toogle vue

2 个答案: