Support delay in transitions

[CyberAP]

What problem does this feature solve?

There's no way to declaratively set transition delay right now. You'll have to use transition hooks for that, which is not that great of experience if you're just using CSS transitions without any JS. Or you'll have to create a new CSS transition for every delay value you want.

What does the proposed API look like?

<transition name="fade" delay="1.5">
  <div v-if="show">Test</div>
</transition>

[Justineo]

You can just use inline style to implement this:

<transition name="fade">
  <div v-if="show" style="transition-delay: 1.5s">Test</div>
</transition>

[CyberAP]

Yes, the same way you could set transition-duration but it has support in the <transition> abstract component. It also won't work with <transition-group>. And lastly it's not declarative, since you have to remember what kind of animation you're using: CSS Transitions or CSS Animations.

[posva]

Add the delay to the actual CSS or JS transition.
The duration is there to allow waiting for a nested transition to finish before removing the wrapper element.

You can also apply classes that define transition durations instead of the inline style, but both are declarative

[CyberAP]

Any comment on why it's bad to have transition delay on the transition component? I am not asking how can I do this the other way, I am suggesting adding it to the transition component.

[CyberAP]

Could this be reopened or I have to create a new issue?
There's another usecase I've found for transition delay. It's when you don't want a transition to happen until you exceed the timer.

<transition name="transition-fade" mode="out-in" :delay="200">
   <SvgIconA key="spinner" v-if="isSearching" />
   <SvgIconB key="search" v-else />
</transition>

In this example if isSearching switches from true to false and back to true in under about 200ms then transition won't be triggered. You can't do this with transition-delay since it will always trigger transition between states.

[Justineo]

You can update isSearching 200ms after the state actually changes. In your example I think it's even better to throttle your input events.

[Tofandel]

+1 for this feature

[sirlancelot]

This feature already exists in CSS. As Justineo pointed out in the first reply to this issue:

<transition name="fade">
  <div v-if="show" style="transition-delay: 1.5s">Test</div>
</transition>

Vue automatically detects and prefixes the declaration as needed. You can even attach it to data:

<template>
  <transition name="fade">
    <div v-if="show" :style="{ transitionDelay: delay }">Test</div>
  </transition>
</template>

<script>
export default {
  data: () => ({ delay: "1.2s" })
}
</script>

[usman-web-dev]

@sirlancelot Thank you soo much that what I need.

[andcl]

This feature already exists in CSS. As Justineo pointed out in the first reply to this issue:

<transition name="fade">
  <div v-if="show" style="transition-delay: 1.5s">Test</div>
</transition>

Vue automatically detects and prefixes the declaration as needed. You can even attach it to data:

<template>
  <transition name="fade">
    <div v-if="show" :style="{ transitionDelay: delay }">Test</div>
  </transition>
</template>

<script>
export default {
  data: () => ({ delay: "1.2s" })
}
</script>

It is not true because in that specific case, the animation is indeed delayed by CSS but always triggered, in any case.
And in that specific example, if isSearching variable switches off in under XX ms, the transition should not be even triggered.