CODEWITHSUNDEEP
vuejs3vue-transitions
Mr.P
Mr.P

Reputation: 1257

Fix animation of neighboring elements vue3 transition

I am trying to figure how animate the button movement ...

when I check the checkbox, the textarea appears correctly with the transition ... and button sort of jumps down (which is fine with me for now)...

But the problem is, that when I uncheck the checkbox, the textarea disappears (within a transtion - all good) but after the transition is finished, the button JUMPS up :( it looks horrible.. how do I fix that?

<script setup>
import { ref } from "vue";

const showNote = ref(false);
const toggleCheckbox = () => {
  showNote.value = !showNote.value;
};
</script>

<template>
  <div class="add-note">
    <div class="flex align-items-center">
      <input type="checkbox" :checked="showNote" @click="toggleCheckbox"/>
      <label>Show note</label>
    </div>
    <Transition>
      <div v-if="showNote" class="note-area">
        <div class="form-item-full-width">
          <textarea id="w3review" name="w3review" rows="4" cols="50"></textarea>
        </div>
      </div>
    </Transition>
  </div>
  <Transition>
  <div class="form-body">
    <div class="form-item-full-width">
      <button type="button">Submit data</button>
    </div>
  </div>
  </Transition>
</template>


<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

here is an example in playground

Upvotes: 0

Views: 45

Answers (1)

David ROSEY
David ROSEY

Reputation: 1805

In addition to avoid the "jump up" behavior, what you need to do is transitioning the max-heigth of the text area :

<style>
  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
    max-height: 100px;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
    max-height: 0px;
  }
</style>

See your example updated : Vue SFC Playground

Note: in this update I also remove the Transition tags wrapping the "Submit" button.

Upvotes: 1

Related Questions