animations

The calendar doesn't move by itself. It tells your CSS when it moved, and which way.

##the moments

• data-direction="next" or "prev", on the calendar and on the rows of days, after each move: the buttons, the keyboard, a month or a year chosen, or a value written from outside. Before the first move there's none, so nothing moves on load.
• The rows of days are new for each month, in every grid with months, so an animation on them plays on every change, in the direction they were created with.
• The months and years grids (table[data-period]) are new when their view opens, and their rows for each year or page of years.

On its own, the calendar only fades its colors when the theme changes, in 150 ms, and not at all with prefers-reduced-motion. Keep your animations inside it too, as the CSS above does.

##tailwind

With the headless parts, on the rows: animate-month-next and animate-month-prev take the keyframes above in your Tailwind config. For anything else, useCalendar().direction has the same value.

<Calendar.GridBody
  rowProps={{
    class: 'motion-safe:data-[direction=next]:animate-month-next motion-safe:data-[direction=prev]:animate-month-prev',
  }}
/>

##the popover

The date picker recipe, as it opens and closes:

@media (prefers-reduced-motion: no-preference) {
  [data-qwik-date][popover] {
    transition: opacity 150ms, translate 150ms, display 150ms allow-discrete, overlay 150ms allow-discrete;
  }
  @starting-style {
    [data-qwik-date][popover]:popover-open { opacity: 0; translate: 0 -4px; }
  }
}