@fluent-windows/core/es/styles/createTransition.js

React components that inspired by Microsoft's Fluent Design System.

import { deepMerge } from '../utils';
export const createBaseTransition = (type, duration = 250, cubicBezier = '0.7, 0.1, 0.33, 1') => type.map(v => `${v} ${duration}ms cubic-bezier(${cubicBezier}) 0ms`).join(',');
const baseTransition = createBaseTransition(['all']);

function createTransition(transitions) {
  const defaultTransitions = {
    default: baseTransition,
    button: createBaseTransition(['background-color', 'color', 'border-color', 'box-shadow', 'padding'], 250),
    input: createBaseTransition(['background-color', 'color', 'border-color'], 250),
    inputLabel: createBaseTransition(['transform'], 180),
    checkbox: baseTransition,
    toggle: baseTransition,
    radio: baseTransition,
    navigation: baseTransition,
    drawer: createBaseTransition(['box-shadow'], 250),
    card: createBaseTransition(['box-shadow', 'filter'])
  };
  return deepMerge(transitions, defaultTransitions);
}

export default createTransition;