0

my problem is that, after transitioned element fades, parent element jumps(not smoothly). I searched before asking in here but couldn't find the solution, thanks for the answers.

Here is the video about my issue: https://streamable.com/us39pu

Main View Code: After adding new task or removing, animation works just fine with 'transition-group' e.g. no sudden jumps


      <ul class="p-4 grid gap-2 grid-cols-1 relative">
        <TransitionGroup
          appear
          move-class="transform transition duration-500 ease-in-out"
          enter-active-class="transform transition duration-500 ease-in-out"
          enter-from-class="opacity-0 scale-x-0 translate-x-1/2"
          enter-to-class="opacity-100 scale-x-100 translate-x-0"
          leave-active-class="transform transition duration-1000 ease-in-out absolute w-full "
          leave-from-class="opacity-100 scale-x-100 translate-x-0"
          leave-to-class="opacity-0 scale-x-0 translate-x-1/2"
        >
          <li v-for="task in tasks" :key="task.id">
            <Task
              :task="task"
              @remove-task="removeTask"
              @edit-task="editTask"
            />
          </li>
        </TransitionGroup>
      </ul>

Task Component: Here editing div and removing animations works fine with 'transition' but after it fades main component jumps e.g. not smoothly


  <transition
    enter-active-class="transition transform duration-500 ease-in-out"
    enter-from-class="scale-y-0 opacity-0 translate-y-1/2"
    enter-to-class="scale-y-full opacity-100 translate-y-0"
    leave-active-class="transition transform duration-500 ease-in-out"
    leave-from-class="scale-y-full opacity-100 translate-y-0"
    leave-to-class="scale-y-0 opacity-0 translate-y-1/2"
  >
    <div class="flex flex-col gap-2 mb-3" v-if="isEdit">
      <input
        v-model="taskLocal.title"
        type="text"
        class="p-1 text-center rounded-md"
      />
      <select v-model="taskLocal.state" class="text-center p-1">
        <option value="important">Important</option>
        <option value="dontForget">Don't Forget</option>
      </select>
      <button
        @click.prevent="editTask(taskLocal)"
        class="p-2 bg-blue-400 rounded-xl"
      >
        edit
      </button>
    </div>
  </transition>
  <div
    class="flex justify-between mb-2 shadow-2xl gap-2 bg-gradient-to-r from-white to-slate-300 rounded-xl items-center p-3 pt-6 relative"
  >
    <div class="absolute -ml-2 top-0 flex left-0 right-0 justify-between">
      <PaperClipIcon class="w-9 -mt-3" />
      <p class="underline decoration-solid break-all text-rose-400 text-xs">
        Created At:
        {{ new Date(task.created_at as any as Date).toLocaleDateString() }}
      </p>
      <div class="flex gap-2">
        <PencilSquareIcon
          @click.prevent="isEdit = !isEdit"
          class="w-5 text-black hover:text-blue-400 cursor-pointer"
        />
        <XMarkIcon
          @click.prevent="removeScreen = !removeScreen"
          class="w-6 hover:text-red-400 cursor-pointer"
        />
      </div>
    </div>
    <ExclamationCircleIcon
      class="w-6 h-6 text-center"
      :class="[task.state === 'important' ? 'text-red-600' : 'text-green-600']"
    />
    <p
      class="transition-all flex-1 duration-1000 ease-in-out break-all text-center text-xl"
      :class="[
        task.isChecked ? ['line-through', 'text-slate-400'] : 'text-slate-700',
      ]"
    >
      {{ task.title }}
    </p>
    <CheckIcon
      v-model="taskLocal.isChecked"
      @click.prevent="taskCheck(taskLocal)"
      class="w-8 h-8 text-center transition-all rounded-full hover:bg-green-300 duration-500 ease-in-out cursor-pointer"
      :class="[taskLocal.isChecked ? 'text-green-600' : 'text-gray-400']"
    />
  </div>
  <transition
    enter-active-class="transform transition duration-1000 ease-in-out"
    enter-from-class="-translate-y-1/2 opacity-0 scale-y-0"
    enter-to-class="translate-y-0 opacity-100 scale-y-100"
    leave-active-class="transform transition duration-500 ease-in-out"
    leave-from-class="translate-y-0 opacity-100 scale-y-100"
    leave-to-class="-translate-y-1/2 opacity-00 scale-y-0"
  >
    <div
      class="flex flex-col p-1 bg-white rounded-xl items-center"
      v-if="removeScreen"
    >
      <h1 class="text-rose-400 text-center">Remove Task</h1>
      <p class="text-slate-400">Task will be removed! Are you sure?</p>
      <div class="flex gap-2">
        <button
          @click.prevent="removeScreen = !removeScreen"
          class="p-1 px-4 rounded-xl bg-red-600"
        >
          No
        </button>
        <button
          @click.prevent="removeTask(task.id as any as number)"
          class="p-1 px-4 rounded-xl bg-green-600"
        >
          Yes
        </button>
      </div>
    </div>
  </transition>

I tried already existing problems but couldn't find any solution for my problem.

Abdullah T
  • 1

0 Answers0