[Feature]: Motion request in fluent dialog #28610
Description
Library
React Components / v9 (@fluentui/react-components)
Describe the feature that you would like added
Motion request for all the fluent dialogs. Similar to what we have on '+ add a tab' in Chat header in Teams.
Few motion that dialog have
1. Content loading animation
2. the appear and disappear motion of the dialog while opening & closing of the dialog
3.motion of the overlay appear and disappear
Have you discussed this feature with our team
Yes
Additional context
Validations
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Specification
Use following transforms/animations:
- The animation is from base fluent animation library.
- Enter: scaleInEnterMedium
- Exit: scaleOutExitMedium
scaleEnterMedium: {
keyframe: {
'0%': {
transform: 'scale(.88)',
opacity: 0,
},
'100%': {
transform: 'scale(1)',
opacity: 1,
},
},
duration: '300ms',
timingFunction: cubic-bezier(.33,0,0,1),
fillMode: 'forwards',
},
scaleExitMedium: {
keyframe: {
'0%': {
transform: 'scale(1)',
opacity: 1,
},
'100%': {
transform: 'scale(.9)',
opacity: 0,
},
},
duration: '300ms',
timingFunction: cubic-bezier(1.0,0.0,0.78,1.0),
fillMode: 'forwards',
},
Overlay animation
Enter Animation: opacity 0 -1
duration: 200ms
cubic-bezier(.33,0,.67,1)
Exit Animation: opacity 1-0
duration: 180ms
cubic-bezier(.33,0,.67,1)