Почему сбрасывается высота контейнера при использовании анимации transition в vue?

Question

[Онотолий]

Странно анимация ведет себя в vue.
Пытаюсь анимировать высоту контейнера, всё работает, но потом резко сбрасывается высота. Пробовал анимировать свойство opacity, тоже все работает как положено и ничего не сбрасывается, а высота почему-то все время сбрасывается.
Я записал гифку, чтобы было понятно что я имею ввиду:



А вот сам код:

<template>
    <Transition name="ggg">
      <div v-show="isShow" class="preview_uploaded_image_window">

      </div>
    </Transition>
   <button @click="isShow = true" value="click!"></button>
<template>

<style>
div.preview_uploaded_image_window{
  background-color: #fff;
  width:8em;
   border-radius:0.4em 0.4em 0 0;
  border: 0.1em solid #e1e1e1;
  border-bottom:0;
  padding: 0 0.3em 0 0.5em;
}

.ggg-enter-active,
.ggg-leave-active {
  transition: height 5s ease;
}

.ggg-enter-from,
.ggg-leave-to {
  height: 0;
}

.ggg-enter-to,
.ggg-leave-from {
  height: 8em;
}
</style>

В чём может быть дело?

Answer 1

[0xD34F]

А почему не должна сбрасываться?

Высота задаётся через классы, которые используются для анимации. Анимация закончилась - класс убрался. Класс убрался - убрался соответствующий стиль height. Всё.

Высота из enter-to/leave-from должна быть высотой по умолчанию, а сами эти классы тут не нужны.

Comments

[Онотолий]

Так а почему тогда с анимацией свойства opacity нет такой проблемы? А еще пробовал translateY, оно тоже анимируется предсказуемо и нет никаких проблем

[0xD34F]

Онотолий, проблема не в анимации, а в несоответствии конечного и дефолтного значений анимируемого свойства. А если проблем не видите, значит эти значения совпадают.