切换 vue 的 css 过渡结束效果

Posted 2023-02-22

【中文标题】切换 vue 的 css 过渡结束效果

【英文标题】：css transition end effect for toogle vue

【发布时间】：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

【参考方案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;