style(motion): add strict animations and fix layout properties
- Change ReadingProgress and RouteTable to use transform (scaleX/scaleY) instead of width/height - Convert existing easing functions to 200ms cubic-bezier(.2,0,0,1) - Document animation purpose with CSS comments - Add guide panel swap, review desk detail swap, and tally pop animations - Implement prefers-reduced-motion for all new states
This commit is contained in:
@@ -139,4 +139,27 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.vote-buttons button b {
|
||||
display: inline-block;
|
||||
}
|
||||
:global(.is-updating) {
|
||||
/* purpose: vote widget tally update (feedback) */
|
||||
animation: tally-pop 200ms cubic-bezier(0.2, 0, 0, 1) both;
|
||||
}
|
||||
@keyframes tally-pop {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:global(.is-updating) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user