Vue 3 button is jumping on v-show

Question

Can anybody advice how can I fix this jumping button?
I am using MaterializedCSS framework.

<h3 class="my-3">{{ name }}</h3>
    <hr />
    <transition name="fade"
      ><div v-show="isHidden">
        <span>Here I am</span>
      </div></transition
    >
    <button
      @click="isHidden = !isHidden"
      class="waves-effect waves-light btn my-8"
    >
      Click Me
    </button>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

I am using v-show directive so the element exists in DOM, its just hidden before button is clicked. As soon as button is clicked appeared texts moves button down.

Answer 1

You need to put the <transition> into a container with a fixed height.

For example:
<div style="height: 50px"><transition name="fade">...</transition></div>