css - 过渡完成后Vue过渡元素不显示

Question

当用户单击顶部栏时，我正在尝试将元素设置为完整的浏览器高度。动画有效，但是一旦（进入）动画完成，容器就会跳回零高度，而它应该一直保持到用户单击关闭按钮。

动画完成后如何使容器保持 100vh？

我尝试添加高度：100vh；在元素上，但是通过这样做，过渡动画停止工作。（通过删除高度，动画有效但元素消失）

不确定这是否重要，但我将 v-if 更改为 v-show 并在容器上添加了一个键，但这似乎没有什么区别。

这是我的代码的链接。并查看动画。

<!-- AboutMeComponent.vue -->
<template>
  <div>
    <div v-show="!extended" class="small-container" @click="extended = !extended">
      <h4>
        <a href="#">CLICK ME</a>
      </h4>
    </div>
    <ExtendTransition>
      <div v-show="extended" key="1" class="main-container">
        <div class="icon-container">
          <a v-show="extended" href="#" @click="extended = !extended">
            <font-awesome-icon icon="times"/>
          </a>
        </div>
      </div>
    </ExtendTransition>
  </div>
</template>

<!-- ExtendTransition.vue -->
<template>
  <transition appear name="extend" mode="out-in">
    <slot></slot>
  </transition>
</template>

<style lang="scss">
.extend-enter-active,
.extend-leave-active {
  transition: 3s;
}

.extend-enter-to,
.extend-leave {
  height: 100vh;
}

.extend-leave-to {
  height: calc(20px + 1vw);
}

.extend-enter {
  height: calc(40px + 3vw);
}
</style>

Answer 1

仅在播放过渡时应用过渡。转换完成后，将删除所有转换类。这意味着您的元素必须具有您希望它在过渡完成后具有的 CSS。然后，您可以使用转换类来设置初始状态并定义转换以到达该点，并从该点到初始状态。

解决此问题的最简单方法是制作ExtendTransition.vue唯一担心转换的组件，并使用包装器来包装您想要扩展的东西。

<template>
  <transition appear name="extend" mode="out-in">
    <div class="extend-transition-wrapper" v-show="extended">
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    extended: {
      type: Boolean,
      default: false
    }
  }
};
</script>

然后，您唯一需要做的就是设置包装器的默认状态：

.extend-transition-wrapper {
  height: 100vh;
  will-change: height;
  position: relative;
}

然后在你ABoutMeComponent.vue使用道具来显示和隐藏内容：

<ExtendTransition :extended="extended">
  <div class="main-container">
    <div class="icon-container">
      <a v-show="extended" href="#" @click="extended = !extended">
        <font-awesome-icon icon="times"/>
      </a>
    </div>
  </div>
</ExtendTransition>

最后，您设置.main-container的高度始终为100%. 由于我们将包装器设置为 have position: relative，这将强制主容器成为该元素的高度。