// @flow
/**
* The transitions shorthand accepts any number of transition values as parameters for creating a single transition statement..
* @example
* // Styles as object usage
* const styles = {
* ...transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s')
* }
*
* // styled-components usage
* const div = styled.div`
* ${...transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s')}
* `
*
* // CSS as JS Output
*
* div {
* 'transition': 'opacity 1.0s ease-in 0s, width 2.0s ease-in 2s'
* }
*/
function transitions(...properties: Array<string>) {
return {
'transition': properties.join(', '),
}
}
export default transitions
|