Why my delete animation not play before delete

Question

<script setup>
import { computed, ref, watch } from "vue";
const emit = defineEmits(["delete-todo", "edit-todo"]);

const props = defineProps({
  isSuccess: {
    type: Boolean,
    default: false,
  },
  description: {
    type: String,
    default: "Nothing",
  },
  id: {
    type: Number,
    default: undefined,
  },
});

const isDelete = ref(false);
const description = computed(() => {
  return props.description;
});
const checkBox = computed(() => {
  return props.isSuccess;
});
const id = computed(() => {
  return props.id;
});
async function handleDelete(event) {
  isDelete.value = true;
 
  emit("delete-todo", props.id, event.target);
  
}
function handleTest() {
  isDelete.value = true;
}

watch(isDelete, (newvalue) => {
  console.log(newvalue);
});
</script>

<template>
  <div
    class="flex row rounded w-full gap-3 bg-blue-200 p-5"
    :class="{ del: isDelete }"
  >
    {{ id }}
    {{ isDelete }}
    <input type="checkbox" class="checkbox my-auto" />
    <p class="w-1/2">{{ description }}</p>
    <button class="btn btn-error" @click="handleDelete">Delete</button>
    <button class="btn">Edit</button>
    <button @click="handleTest" class="btn">Test</button>
  </div>
</template>
<style>
@keyframes deletionAnimation {
  from {
    opacity: 1;
    
  }
  to {
    opacity: 0;
    
    left: 500px;
  }
}

/* Apply animation to .del class */
.del {
  animation: deletionAnimation 2s ease-in-out;
}
</style>

I've been working on implementing animations that play when the delete button is clicked, followed by recomputing the component. However, I'm encountering a problem where the animation doesn't seem to trigger before the deletion occurs. I've tried using classes to handle this functionality, but so far, I haven't been successful in resolving the issue.

Upon clicking the delete button, the desired behavior is to first play an animation to provide visual feedback to the user, indicating that the deletion process has been initiated. Following this animation, the component should then recompute to reflect the changes made after the deletion. However, the current implementation falls short of achieving this desired sequence of actions.

One potential issue might lie in the order of events or how the animation is being triggered within the code. It's crucial to ensure that the animation is triggered before the deletion process begins. This may involve revisiting the code responsible for handling the deletion action and ensuring that the animation is explicitly triggered before any deletion-related functions are executed.

tailwind css Vue vite template

Answer 1

I'm not an expert in vue, but in this function

async function handleDelete(event) {
  isDelete.value = true;
 
  emit("delete-todo", props.id, event.target);
  
}

you set isDelete and call emit immediately after that without allowing animation to finish, which will require 2 sec as specified in the CSS.

You can probably apply a delay before you actually remove the item and, hence, allow the animation to finish.

For example, like so:

async function handleDelete(event) {
  isDelete.value = true;

  setTimeout(() => emit("delete-todo", props.id, event.target), 2000);
}

Sorry, I cannot test this code right now but I assume it should work. Please let me know if this helps.