https://github.com/megatolya/postcss-will-change-transition

PostCSS plugin to add will-change property after transition declarations
https://github.com/megatolya/postcss-will-change-transition

postcss transition will-change

Last synced: 2 months ago
JSON representation

PostCSS plugin to add will-change property after transition declarations

• Host: GitHub
• URL: https://github.com/megatolya/postcss-will-change-transition
• Owner: megatolya
• Created: 2017-06-01T15:28:33.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-13T10:34:15.000Z (over 7 years ago)
• Last Synced: 2024-04-14T06:13:21.421Z (9 months ago)
• Topics: postcss, transition, will-change
• Language: JavaScript
• Homepage:
• Size: 8.79 KB
• Stars: 15
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PostCSS will change transition

[PostCSS]:      https://github.com/postcss/postcss



[PostCSS] plugin to generate will-change for transition props.

This plugin adds `will-change` property after `transition` property to speed up animations.

Can be combined with [postcss-will-change](https://github.com/postcss/postcss-will-change) plugin.

```css

.foo {

    transition: opacity 0.2s ease, width 0.2s ease;

}

```

```css

.foo {

    transition: opacity 0.2s ease, width 0.2s ease;

    will-change: opacity, width;

}

```

## Important note

Make sure that if you use this plugin it does not contradict with `will-change` idea. Please see links below:

- https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

- https://www.sitepoint.com/introduction-css-will-change-property/

- https://css-tricks.com/almanac/properties/w/will-change/

## Usage

```js

postcss([ require('postcss-will-change-transition') ])

// with fallback plugin:

postcss([ require('postcss-will-change-transition'), require('postcss-will-change')  ])

```

See [PostCSS] docs for examples for your environment.