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

Conversation

Projects
None yet
3 participants
@webdeveloperpr
Copy link
Contributor

webdeveloperpr 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
Luis Betancourt
@welcome

This comment has been minimized.

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

This comment has been minimized.

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 confirmed and removed needs: LGTM labels Dec 19, 2018

@gkatsev gkatsev merged commit 0e69ce9 into videojs:master Dec 26, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
netlify/videojs-docs/deploy-preview Deploy preview ready!
Details
@welcome

This comment has been minimized.

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