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%, Так как мы установили обертку, чтобы иметь position: relative, это заставит основной контейнер стать высотой этого элемента.