Skip to content

Fix css animation order#5687

Merged
gkatsev merged 1 commit into
videojs:masterfrom
betancourtl:master
Dec 26, 2018
Merged

Fix css animation order#5687
gkatsev merged 1 commit into
videojs:masterfrom
betancourtl:master

Conversation

@betancourtl

@betancourtl betancourtl commented Dec 14, 2018 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR fixes the animation shorthand order.

Animation shorthand order can be found here:
https://alligator.io/css/animation-shorthand/
https://css-tricks.com/almanac/properties/a/animation/

name | duration | ease-in-out | delay | iteration-count | backwards

BEFORE

.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {
  display: block;
  animation: 0s linear 0.3s forwards vjs-spinner-show ;
}

AFTER

.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {
  display: block;
  animation: vjs-spinner-show 0s linear 0.3s forwards;
}

This will fix css minimization issues when using https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production.

incorrect vs correct css syntax

bug

Specific Changes proposed

Please list the specific changes involved in this pull request.

Requirements Checklist

  • Feature implemented / Bug fixed
  • If necessary, more likely in a feature request than a bug fix
    • Change has been verified in an actual browser (Chome, Firefox, IE)
    • Unit Tests updated or fixed
    • Docs/guides updated
    • Example created (starter template on JSBin)
  • Reviewed by Two Core Contributors

@welcome

welcome Bot commented Dec 14, 2018

Copy link
Copy Markdown

💖 Thanks for opening this pull request! 💖

Things that will help get your PR across the finish line:

  • Run npm run lint -- --errors locally to catch formatting errors earlier.
  • Include tests when adding/changing behavior.
  • Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

@gkatsev

gkatsev commented Dec 18, 2018

Copy link
Copy Markdown
Member

Interesting, looking at mdn and the spec, it seems like the name comes last, however, reading a bit more into the spec, it doesn't really matter the order. It'll basically try its best to parse things. So, I think that the tool isn't right here. It should be able to parse it out properly. However, it does seem like we already have the name as the first item in a few of the other animation properties, so, we may as well be more consistent.

@gkatsev gkatsev added patch This PR can be added to a patch release. needs: LGTM Needs one or more additional approvals labels Dec 18, 2018
@gkatsev gkatsev added confirmed and removed needs: LGTM Needs one or more additional approvals labels Dec 19, 2018
@gkatsev gkatsev merged commit 0e69ce9 into videojs:master Dec 26, 2018
@welcome

welcome Bot commented Dec 26, 2018

Copy link
Copy Markdown

Congrats on merging your first pull request! 🎉🎉🎉

@Centaurioun Centaurioun mentioned this pull request Dec 14, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@misteroneill misteroneill misteroneill approved these changes

@gkatsev gkatsev gkatsev approved these changes

Assignees

No one assigned

Labels

confirmed patch This PR can be added to a patch release.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@betancourtl @gkatsev @misteroneill