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

Question

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

如何让容器在动画结束时保持 100vh？

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

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

这是a link to my code. And to 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，这将强制主容器成为该元素的高度。

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

Vue transitioned element not showing after transition is complete

css

vue.js

vue-transitions