question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support delay in transitions

See original GitHub issue

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>

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:13
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

31reactions
Justineocommented, Jan 29, 2019

You can just use inline style to implement this:

<transition name="fade">
  <div v-if="show" style="transition-delay: 1.5s">Test</div>
</transition>
12reactions
Tofandelcommented, May 22, 2019

+1 for this feature

Read more comments on GitHub >

github_iconTop Results From Across the Web

transition-delay - CSS: Cascading Style Sheets | MDN
The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.
Read more >
"transition-delay" | Can I use... Support tables for HTML5 ...
Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function. Usage % of. all...
Read more >
transition-delay | CSS-Tricks
When a transition has a delay value that is negative, it will cause the transition to begin immediately (with no delay), however, the...
Read more >
CSS transition-delay Property - W3Schools
The transition-delay property specifies when the transition effect will start. The transition-delay value is defined in seconds (s) or milliseconds (ms).
Read more >
CSS transition-delay Property - Dofactory
The transition-delay specifies a time delay before the transition starts. Transition delay can be set in seconds (s) or in milliseconds (ms).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found