本文整理匯總了TypeScript中@uifabric/merge-styles/lib/index.keyframes函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript keyframes函數的具體用法？TypeScript keyframes怎麽用？TypeScript keyframes使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了keyframes函數的5個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的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: _createSlideInX
function _createSlideInX(fromX: number): string {
return keyframes({
from: { transform: `translate3d(${fromX}px,0,0)` },
to: { transform: `translate3d(0,0,0)` }
});
}示例4: _createSlideOutY
function _createSlideOutY(toY: number): string {
return keyframes({
from: { transform: `translate3d(0,0,0)` },
to: { transform: `translate3d(0,${toY}px,0)` }
});
}示例5: keyframes
import { IAnimationStyles } from '../interfaces/index';
import { IRawStyle, keyframes } from '@uifabric/merge-styles/lib/index';
/* 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);