You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: website/docs/docs/navigation.mdx
+32-6
Original file line number
Diff line number
Diff line change
@@ -104,12 +104,6 @@ To animate the transition between months, set the `animate` prop to `true`:
104
104
<Examples.Animate />
105
105
</BrowserWindow>
106
106
107
-
:::warning Experimental Feature
108
-
109
-
The `animate` prop is experimental and may change in the future. Please note that advanced animations may be limited by the table HTML structure. Please report any issues in the [GitHub Discussions](https://github.com/gpbl/react-day-picker/discussions).
110
-
111
-
:::
112
-
113
107
### Customizing the Animation
114
108
115
109
Use the supported CSS variables to customize the animation duration or timing function:
@@ -137,6 +131,38 @@ To improve accessibility for users who prefer reduced motion, you can use the `p
137
131
}
138
132
```
139
133
134
+
### Changing the Animation Functions
135
+
136
+
For a more advanced customization, you can change override the default style with your own animation functions:
137
+
138
+
```css
139
+
.rdp-caption_after_enter {
140
+
animation:; /* Your value here */
141
+
}
142
+
```
143
+
144
+
<details>
145
+
<summary>Class Names Used For Animations</summary>
|`.rdp-caption_after_enter`| Caption animation for the month after, when enters. |
150
+
|`.rdp-caption_after_exit`| Caption animation for the month after, when exits. |
151
+
|`.rdp-caption_before_enter`| Caption animation for the month before, when enters. |
152
+
|`.rdp-caption_before_exit`| Caption animation for the month before, when exits. |
153
+
|`.rdp-weeks_before_enter`| Weeks animation for the month before, when enters. |
154
+
|`.rdp-weeks_before_exit`| Weeks animation for the month before, when exits. |
155
+
|`.rdp-weeks_after_enter`| Weeks animation for the month after, when enters. |
156
+
|`.rdp-weeks_after_exit`| Weeks animation for the month after, when exits. |
157
+
158
+
</details>
159
+
160
+
:::warning Advanced Feature
161
+
162
+
Customizing the animation function, such as for a up/down transition, can be challenging due to the HTML table structure of the grid. We may improve this in a future version. Please leave your feedback in [DayPicker Discussions](https://github.com/gpbl/react-day-picker/discussions).
163
+
164
+
:::
165
+
140
166
## Disabling the Navigation {#disablenavigation}
141
167
142
168
To prevent the user from navigating between months, set the `disableNavigation` prop to `true`.
0 commit comments