Vue переходный элемент не отображается после завершения перехода - PullRequest
Новая
       20

Vue переходный элемент не отображается после завершения перехода

2 голосов
/ 11 июля 2019

Я пытаюсь оживить элемент до полной высоты браузера, когда пользователь нажимает на верхнюю панель. Анимация работает, но после завершения (ввода) анимации контейнер возвращается к нулевой высоте, в то время как он должен оставаться до тех пор, пока пользователь не нажмет кнопку закрытия.

Как сделать так, чтобы контейнер оставался 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>

1 Ответ

0 голосов
/ 11 июля 2019

Переход применяется только во время воспроизведения перехода.После завершения перехода все классы перехода удаляются.Это означает, что ваш элемент должен иметь 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, это заставит основной контейнер стать высотой этого элемента.

Edit Vue Template

...