Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix css animation order #5687

Merged
merged 1 commit into from
Dec 26, 2018
Merged

Fix css animation order #5687

merged 1 commit into from
Dec 26, 2018

Conversation

betancourtl
Copy link
Contributor

@betancourtl betancourtl commented Dec 14, 2018

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
Copy link

welcome bot commented Dec 14, 2018

💖 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
Copy link
Member

gkatsev commented Dec 18, 2018

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
Copy link

welcome bot commented Dec 26, 2018

Congrats on merging your first pull request! 🎉🎉🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
confirmed patch This PR can be added to a patch release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants