-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Animation documentation is lacking #9863
Comments
I am currently trying to add animations to a component when it mounts, unmounts and updates; but I have no clue where to even start with OUFR. I might end up consuming a third party react library for all my animation needs. |
This is what I've ascertained so far about using animations:
|
Recommend that before we start documenting css-in-js imports of animations, we do the right thing here. I think suggesting to import animations from There are a couple of proposals I have: Option 1. We split animations our from fabric core css and add a consumption guide.Possibly, we could have a "stylesheet urls" section in the theme to auto-add stylesheets as required. Pros:
Cons:
Option 2. Animations accessible through theme via class names.This requires that any element which wants to use animations accesses them via contextual theme. We should provide multiple solutions to access the theme:
styled.div(p => [
p.theme.animations.fadeIn40
]);
export const MyComponent = withTheme(MyComponentBase);
...render() {
return <div className={ this.props.theme.animations.fadeIn40 } />;
}
const MyComponent = () => {
const theme = useTheme();
return <div className={theme.animations.fadeIn40} />;
}; Pros:
Cons:
|
I would love to see 2 someday, but not until we have a firm idea of how animations are used, how they are composed, and what animations look like in different themes. I think we should start with 1 for now until we have more concrete experience with animations. (Additionally, we haven't even updated animations since Fluent.) |
We have some |
Could someone show a sample code of how a simple animation is implemented in React using UI Fabric Motion. I just can't find an example out there. |
@horsfallnathan import {
AnimationStyles,
AnimationVariables // you can use this to customize things like duration or delay
} from 'office-ui-fabric-react/lib/Styling';
export const getStyles = (props: IFooStyleProps): IFooStyles => {
return {
root: {
...AnimationStyles.slideUpOut10
}
};
} |
Have you looked at EDIT: Now located here |
This helps thanks. |
I'd like to use UI Fabric with Blazor. Currently, it seems that animation isn't possible with Fabric Core/plain css, is it? Thanks |
Previous links to AnimationExample.tsx were broken due to change from github fabric repository to fluentui branch. |
@parruc That version is pretty outdated too (though I don't think it's changed much since then). This is the current version: |
So basically there is no documentation for these animations and we have to rely on a single example.. |
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes. Still require assistance? Please, create a new issue with up-to date details. |
Can this be resurfaced? The animation documentation is still lacking |
Reopening the issue. |
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes. Still require assistance? Please, create a new issue with up-to date details. |
The new animation documentation is located here:
https://developer.microsoft.com/en-us/fabric#/styles/web/motion
However there are a few problems with it.
@ecraig12345 @Jahnp
The text was updated successfully, but these errors were encountered: