postcss-transition
v1.2.0
Published
Allows you to set the default value for the transition shorthand property
Downloads
37
Maintainers
Readme
postcss-transition
Installation
npm i postcss-transition
Plugin that allows you to set the default value for the transition shorthand property
USAGE:
Add the plugin (postcss.config)
postcss([
// (plugins) Anything ....
require('postcss-transition')({
// Everything is optional, you can set only duration, or timing-function
// If nothing is set, then there is nothing to replace, the plugin will not do anything
property: 'ANY_PROPERTY',
duration: 'ANY_DURATION',
delay: 'ANY_DELAY',
timingFunction: 'ANY_FUNCTION',
}),
// (optimization) autoprefixer, postcss-clean, css-mqpacker ...
]);
ANY_**
— means any value, just string for javascript
, will be inserted AS IS
Add property in source code
Order of values SHOULD be: [property][duration] [delay][timing-function], should be, but it's not must be
!!BUT!! duration is always BEFORE delay
a {
transition: ; /* (dont sure it works with pre-processors) */
transition: color;
transition: color 2s;
transition: color 2s ease-in;
}
See results
a {
transition: ANY_PROPERTY ANY_DURATION ANY_DELAY ANY_FUNCTION;
/* use all defaults (ideally) */
transition: color ANY_DURATION ANY_DELAY ANY_FUNCTION;
/* property (exists) + duration (added) + delay (added) + timing-function (added) */
transition: color 2s ANY_DELAY ANY_FUNCTION;
/* property (exists) + duration (exists) + delay (added) + timing-function (added) */
transition: color 2s ANY_DELAY ease-in;
/* property (exists) + duration (exists) + delay (added) + timing-function (exists) */
}
Reason ?
I'm (~too lazy~) tired to write the remaining values for the property
Alternatives ?
1) Inherit
*,
::before,
::after {
transition-timing-function: var(--transition-function);
transition-duration: var(--transition-duration);
transition-property: none;
}
a {
transition-property: color;
}
2) Mixins
- https://www.npmjs.com/package/transition-mixin
- http://compass-style.org/reference/compass/css3/transition/
- https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
- ~my old mixin on stylus which you shouldn't see ))))~
3) Do not be lazy?
Example
Config:
postcss([
// ...
require('postcss-transition')({
property: 'var(--transition-property)',
duration: 'var(--transition-duration)',
delay: 'var(--transition-delay)',
timingFunction: 'var(--transition-timing-function)',
}),
// ...
]);
Input
/* just as an example of use with css variables (yes -_-, custom properties, i know) */
:root {
--transition-property: color;
--transition-duration: 0.2s;
--transition-delay: 40ms;
--transition-timing-function: ease-in-out;
}
a {
transition: color;
}
Output
:root {
--transition-property: color;
--transition-duration: 0.2s;
--transition-delay: 40ms;
--transition-timing-function: ease-in-out;
}
a {
transition: color var(--transition-duration) var(--transition-delay) var(--transition-timing-function);
}
handy
More examples
/* {
duration: '200ms'
} */
a {
transition: color;
/* -> */
transition: color 200ms;
}
/* {
duration: '200ms',
timingFunction: 'ease-in-out'
} */
a {
transition: color;
/* -> */
transition: color 200ms ease-in-out;
}
/* {
property: color,
duration: '200ms',
timingFunction: 'ease-in-out'
} */
a {
transition: ;
/* -> */
transition: color 200ms ease-in-out;
}
ul li a {
transition: color, background-color;
/* -> */
transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}
button {
transition: background-color;
/* -> */
transition: background-color 200ms ease-in-out;
}
/* {
duration: '200ms'
} */
a {
transition: ease-in 1s font-size;
/* -> */
transition: font-size 1s ease-in; /* just re-order in this case */
}
a {
transition: font-size ease-in;
/* and */
transition: ease-in font-size;
/* -> */
transition: font-size 200ms ease-in; /* the same */
}
a {
transition: ease-in font-size 1s;
/* -> */
transition: font-size 1s ease-in;
}
a {
transition: 1s color ease-in;
/* -> */
transition: color 1s ease-in;
}
a {
transition: 1s 2s color ease-in;
/* -> */
transition: color 1s 2s ease-in;
}
a {
transition: ease-in color 1s 2s;
/* -> */
transition: color 1s 2s ease-in;
}
well, you get the idea