切换 vue 的 css 过渡结束效果答案

【问题标题】：css transition end effect for toogle vue切换 vue 的 css 过渡结束效果
【发布时间】：2020-11-05 03:02:11
【问题描述】：

当它变大时我做了一个盒子过渡，我如何让它在关闭时仍然具有相同的过渡效果，因为它会急剧关闭。

<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

【问题讨论】：

标签： javascript html css vue.js css-transitions

【解决方案1】：

您应该像这样将转换属性添加到.box 类：

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

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

你这样做是因为无论状态如何，这个类都存在，所以当你删除另一个类时，转换仍然存在。

这里有一个额外提示：您可以像这样在元素上使用单个类属性：

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

【讨论】：

【解决方案2】：

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

只需将过渡添加到 .box 类

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

【讨论】：