本文整理汇总了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%': {}
});
}示例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%': {}
});
}示例3: _createSlideOutY
function _createSlideOutY(toY: number): string {
return keyframes({
from: { transform: `translate3d(0,0,0)` },
to: { transform: `translate3d(0,${toY}px,0)` }
});
}示例4: _createSlideInX
function _createSlideInX(fromX: number): string {
return keyframes({
from: { transform: `translate3d(${fromX}px,0,0)` },
to: { transform: `translate3d(0,0,0)` }
});
}示例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);示例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)' }
});