• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript Styling.keyframes函数代码示例

原作者: [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;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript Utilities.memoizeFunction函数代码示例发布时间:2022-05-25
下一篇:
TypeScript Styling.getTheme函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap