TypeScript merge-styles.keyframes函数代码示例

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

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

本文整理汇总了TypeScript中@uifabric/merge-styles.keyframes函数的典型用法代码示例。如果您正苦于以下问题：TypeScript keyframes函数的具体用法？TypeScript keyframes怎么用？TypeScript keyframes使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了keyframes函数的6个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: _continuousPulseAnimationDouble

function _continuousPulseAnimationDouble(
  beaconColorOne: string,
  beaconColorTwo: string,
  innerDimension: string,
  outerDimension: string,
  borderWidth: string
): string {
  return keyframes({
    '0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
    '1.42%': _continuousPulseStepTwo(borderWidth),
    '3.57%': _continuousPulseStepThree(),
    '7.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
    '8%': _continuousPulseStepFive(beaconColorOne, innerDimension),
    '29.99%': _continuousPulseStepFive(beaconColorOne, innerDimension),
    '30%': _continuousPulseStepOne(beaconColorOne, innerDimension),
    '31.42%': _continuousPulseStepTwo(borderWidth),
    '33.57%': _continuousPulseStepThree(),
    '37.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
    '38%': _continuousPulseStepFive(beaconColorOne, innerDimension),
    '79.42%': _continuousPulseStepFive(beaconColorOne, innerDimension),
    '79.43': _continuousPulseStepOne(beaconColorOne, innerDimension),
    '81.85': _continuousPulseStepTwo(borderWidth),
    '83.42': _continuousPulseStepThree(),
    '87%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
    '100%': {}
  });
}

开发者ID:magellantoo，项目名称:office-ui-fabric-react，代码行数:27，代码来源:PulsingBeaconAnimationStyles.ts

示例2: _continuousPulseAnimationSingle

function _continuousPulseAnimationSingle(
  beaconColorOne: string,
  beaconColorTwo: string,
  innerDimension: string,
  outerDimension: string,
  borderWidth: string
): string {
  return keyframes({
    '0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
    '14.2%': _continuousPulseStepTwo(borderWidth),
    '35.7%': _continuousPulseStepThree(),
    '71.4%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
    '100%': {}
  });
}

开发者ID:magellantoo，项目名称:office-ui-fabric-react，代码行数:15，代码来源:PulsingBeaconAnimationStyles.ts

示例3: _createSlideOutY

function _createSlideOutY(toY: number): string {
  return keyframes({
    from: { transform: `translate3d(0,0,0)` },
    to: { transform: `translate3d(0,${toY}px,0)` }
  });
}

开发者ID:magellantoo，项目名称:office-ui-fabric-react，代码行数:6，代码来源:AnimationStyles.ts

示例4: _createSlideInX

function _createSlideInX(fromX: number): string {
  return keyframes({
    from: { transform: `translate3d(${fromX}px,0,0)` },
    to: { transform: `translate3d(0,0,0)` }
  });
}

开发者ID:magellantoo，项目名称:office-ui-fabric-react，代码行数:6，代码来源:AnimationStyles.ts

示例5: keyframes

import { IAnimationStyles, IAnimationVariables } from '../interfaces/index';
import { IRawStyle, keyframes } from '@uifabric/merge-styles';

/* Register the keyframes */

const EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
const EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
const DURATION_1 = '0.167s';
const DURATION_2 = '0.267s';
const DURATION_3 = '0.367s';
const DURATION_4 = '0.467s';

const FADE_IN: string = keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 }
});

const FADE_OUT: string = keyframes({
  from: { opacity: 1 },
  to: { opacity: 0 }
});

const SLIDE_RIGHT_IN10: string = _createSlideInX(-10);
const SLIDE_RIGHT_IN20: string = _createSlideInX(-20);
const SLIDE_RIGHT_IN40: string = _createSlideInX(-40);
const SLIDE_RIGHT_IN400: string = _createSlideInX(-400);
const SLIDE_LEFT_IN10: string = _createSlideInX(10);
const SLIDE_LEFT_IN20: string = _createSlideInX(20);
const SLIDE_LEFT_IN40: string = _createSlideInX(40);
const SLIDE_LEFT_IN400: string = _createSlideInX(400);
const SLIDE_UP_IN10: string = _createSlideInY(10);

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

示例6: keyframes

import { keyframes } from '@uifabric/merge-styles';

const fadeInAnimationName: string = keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 }
});

const fadeOutAnimationName: string = keyframes({
  from: { opacity: 1 },
  to: { opacity: 0 }
});

const scaleDownInAnimationName: string = keyframes({
  from: { transform: 'scale3d(1.15, 1.15, 1)' },
  to: { transform: 'scale3d(1, 1, 1)' }
});

const scaleDownOutAnimationName: string = keyframes({
  from: { transform: 'scale3d(1, 1, 1)' },
  to: { transform: 'scale3d(0.9, 0.9, 1)' }
});

const slideLeftOutAnimationName: string = keyframes({
  from: { transform: 'translate3d(0, 0, 0)' },
  to: { transform: 'translate3d(-48px, 0, 0)' }
});

const slideRightOutAnimationName: string = keyframes({
  from: { transform: 'translate3d(0, 0, 0)' },
  to: { transform: 'translate3d(48px, 0, 0)' }
});

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

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