What's the Vue way to create artificial delay in transitions?


#1

Say that I want to add a purposeful delay to the DOM change.

For example: When a user clicks the Remove Entry button, it will blink for 700ms, and only then call the removeEntry() method, which usually returns much faster.

The way I’m achieving this right now goes like this:

// helper function
function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}


methods: {
    ...mapActions([
        'deleteToDoItem',
    ]),
    deleteToDo(todo_id) {
        this.beingModified = true
        let delete_func = () => {
          this.deleteToDoItem(todo_id).then().catch(() => this.markAsFailed()).finally(() => this.beingModified=false)
            }
        sleep(800).then(() => delete_func())
        
        }
....

But I’m wondering whether there’s a better way seeing as Vue gives you so much out of the box


#2

I suppose the “Vue” way could be to make use of transition hooks. https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks


#3

The thing is, that the button itself is never removed per-se, its parent (a Vue component) is removed, and I’m already using transitions for that.

What I want is this:

  1. Remove button is clicked
  2. Remove button blinks for XXms (parent isn’t removed yet)
  3. Parent component is removed (that transition is already handled)

#4

Ahh. I see, then I think you’re going about it the right way with setTimeout. You’d just need to toggle a “blink” class on the button.


#5

Yeah, this is already a working example, but just wanted another set of eyes. Thanks James.

I think I’ll maybe attach this setTimeout snippet to a separate class of API calls that I want animated so I don’t have to do this for every animation that I want to delay.