本文整理匯總了TypeScript中office-ui-fabric-react/lib/Styling.keyframes函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript keyframes函數的具體用法？TypeScript keyframes怎麽用？TypeScript keyframes使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了keyframes函數的7個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: keyframes
import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';
const donutChartLoadingSegmentAnimationSegment1Keyframes = keyframes({
'90%': {
strokeDashoffset: '-100'
},
'100%': {
strokeDashoffset: '-100'
}
});
const donutChartLoadingSegmentAnimationSegment2Keyframes = keyframes({
'9%': {
strokeDashoffset: '23'
},
'93%': {
strokeDashoffset: '-100'
},
'100%': {
strokeDashoffset: '-100'
}
});
export interface IDonutChartStyles {
donutChartLoading: IStyle;
donutChartLoadingSegment: IStyle;
donutChartLoadingBase: IStyle;
// tslint:disable-next-line:no-any
donutChartCircleFirst?: any;
// tslint:disable-next-line:no-any示例2: keyframes
import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';
const shimmerLoadingAnimationKeyframes = keyframes({
'92.8%': {
transform: 'translateX(100%)'
},
'100%': {
transform: 'translateX(100%)'
}
});
export interface IShimmerStyles {
shimmerLoading: IStyle;
shimmerLoadingBar: IStyle;
}
export const getStyles = (): IShimmerStyles => {
return {
shimmerLoading: {
height: '300px',
width: '240px',
position: 'relative',
bottom: '20%',
/* scaling the y axis so we have nice round numbers to work with and get the size we want */
transform: 'scaleY(0.2)',
opacity: '0.6',
overflow: 'hidden'
},
shimmerLoadingBar: {
transform: 'translateX(-100%)',示例3: keyframes
import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';
const horizontalBarGraphLoadingAnimationBar1Keyframes = keyframes({
' 0%': {
animationTimingFunction: 'cubic-bezier(0.67, 0, 0.46, 1)',
transform: 'translateX(-100%)'
},
'92.8%': {
transform: 'translateX(157%)'
},
'100%': {
transform: 'translateX(157%)'
}
});
const horizontalBarGraphLoadingAnimationBar2Keyframes = keyframes({
'0%': {
transform: 'translateX(-100%)'
},
'25%': {
animationTimingFunction: 'cubic-bezier(0.67, 0, 0.43, 1)',
transform: 'translateX(-100%)'
},
'90.6%': {
transform: 'translateX(125%)'
},
'100%': {
transform: 'translateX(125%)'
}
});示例4: keyframes
import { DefaultFontStyles, FontWeights, DefaultPalette, keyframes } from 'office-ui-fabric-react/lib/Styling';
import { ISetupCardStyles, ISetupCardStylesProps } from './SetupCard.types';
const freTransformIntro = keyframes({
from: {
animationTimingFunction: 'cubic-bezier(.29,1.35,.71,1.01)',
transform: 'translateY(496px)'
}
});
const freOpacityIntro = keyframes({
from: {
animationTimingFunction: 'cubic-bezier(0.28, 0, 0, 1)'
},
to: {
opacity: '1'
}
});
export const getStyles = (props: ISetupCardStylesProps): ISetupCardStyles => {
return {
root: {
fill: 'none',
opacity: '0',
animation: `${freTransformIntro} .583s 1, ${freOpacityIntro} .583s 1`,
animationFillMode: 'forwards',
position: 'absolute'
},
title: {
fill: DefaultPalette.black,示例5: keyframes
import { IStyle, keyframes } from 'office-ui-fabric-react/lib/Styling';
export interface ICardStyles {
root: IStyle;
fadeIn: IStyle;
}
const fadeIn: string = keyframes({
from: { opacity: 0 },
to: { opacity: 1 }
});
// time for which the card fade in animation is shown, after adding a card to layout from add card panel
const fadeInAnimation = {
animationName: fadeIn,
animationDuration: '1.35s'
};
export const getCardStyles = (): ICardStyles => {
return {
root: {
height: 'calc(100vh - 100px)'
},
fadeIn: [fadeInAnimation]
};
};
開發者ID:aditima，項目名稱:office-ui-fabric-react，代碼行數:26，代碼來源:DashboardGridLayoutWithAddCardPanel.styles.ts
示例6: keyframes
import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';
const lineChartLoadingSegmentAnimationSegment1Keyframes = keyframes({
'90%': {
strokeDashoffset: '-105%'
},
'100%': {
strokeDashoffset: '-105%'
}
});
const lineChartLoadingSegmentAnimationSegment2Keyframes = keyframes({
'9%': {
strokeDashoffset: '65%'
},
'97%': {
strokeDashoffset: '-105%'
},
'100%': {
strokeDashoffset: '-105%'
}
});
export interface ILineChartStyles {
lineChartLoading: IStyle;
lineChartLoadingSegment: IStyle;
// tslint:disable-next-line:no-any
lineChartLoadingSegmentFirst: any;
// tslint:disable-next-line:no-any
lineChartLoadingSegmentSecond: any;示例7: keyframes
import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';
const barGraphLoadingAnimationBar1Keyframes = keyframes({
'65.7%': {
transform: 'translateY(-100%)'
},
'100%': {
transform: 'translateY(-100%)'
}
});
const barGraphLoadingAnimationBar2Keyframes = keyframes({
'10%': {
transform: 'translateY(125%)'
},
'68.5%': {
transform: 'translateY(-100%)'
},
'100%': {
transform: 'translateY(-100%)'
}
});
const barGraphLoadingAnimationBar3Keyframes = keyframes({
'5.7%': {
transform: 'translateY(125%)'
},
'69.9%': {
transform: 'translateY(-100%)'
},