TypeScript Styling.keyframes函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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

开发者ID:aditima，项目名称:office-ui-fabric-react，代码行数:31，代码来源:DonutChart.style.ts

示例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%)',

开发者ID:aditima，项目名称:office-ui-fabric-react，代码行数:31，代码来源:Shimmer.style.ts

示例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%)'
  }
});

开发者ID:aditima，项目名称:office-ui-fabric-react，代码行数:31，代码来源:HorizontalBarGraph.style.ts

示例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,

开发者ID:aditima，项目名称:office-ui-fabric-react，代码行数:31，代码来源:SetupCard.styles.ts

示例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;

开发者ID:aditima，项目名称:office-ui-fabric-react，代码行数:31，代码来源:LineChart.style.ts

示例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%)'
  },

开发者ID:aditima，项目名称:office-ui-fabric-react，代码行数:31，代码来源:BarGraph.style.ts

注：本文中的office-ui-fabric-react/lib/Styling.keyframes函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。