Steps in the right direction for animated date change
This commit is contained in:
parent
5e966ddea2
commit
f50f5ad53b
7 changed files with 378 additions and 37 deletions
24
wwwroot/css/calendar-sliding-animation.css
Normal file
24
wwwroot/css/calendar-sliding-animation.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
/* POC-style Calendar Sliding Animation CSS */
|
||||
|
||||
/* Grid container base styles */
|
||||
swp-grid-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0); /* GPU acceleration */
|
||||
}
|
||||
|
||||
/* Calendar container for sliding */
|
||||
swp-calendar-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Accessibility: Respect reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
swp-grid-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue