转换完成后，不显示Vue转换元素

Question

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

动画结束后，如何使容器保持100vh？

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

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

这里是我代码的a link。并view动画。

<!-- 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%的高度。由于我们将包装器设置为具有position: relative，因此这将迫使主容器成为该元素的高度。