coskuncay / vue3-flip-countdown

Countdown timer with Flip Animation for Vue 3.x

Home Page:https://vue3-flip-countdown.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Enhancement: Updating the deadline

geld0r opened this issue · comments

I use this component to show a countdown and it works nicely for this (and looks great, too!).

In my usecase the "deadline" can be updated though. I think currently this doesn't work correctly, as the counter doesn't reflect the updated deadline. I use the following to force Vue to rerender the component when the property changes:

<Countdown :key="myDeadline"/>

This works, but doesn't really look great as each counter briefly resets to 0 and then again to the new value.

I think for this use case it would be great if this worked seamlessly and maybe even with a small effect that properly "flips" the counters. Think of how this looks in old-time flip displays at the airport or train station, e.g. like here: https://www.youtube.com/watch?v=cj32w5z81Ak