TypeScript merge-styles.keyframes函數代碼示例

本文整理匯總了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；未經允許，請勿轉載。