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
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.