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

Fixed Custom Builds #695

Merged
merged 2 commits into from Nov 10, 2017
Merged

Fixed Custom Builds #695

merged 2 commits into from Nov 10, 2017

Conversation

vrescobar
Copy link
Contributor

First of all congratulations for this simple and easy to use CSS library ㊗️

The documentation spoke about custom builds to reduce size and showed a way to customize them:

"attention_seekers": { "bounce": true, "flash": false, "pulse": false, "shake": true, "headShake": true, "swing": true, "tada": true, "wobble": true, "jello":true }

However that never worked for me if I wanted to add only one animation, the whole group of animations was always gone independently of the boolean value, that's how I found out it was a bug.

I corrected the gulpfile to iterate objects instead of the for loop for arrays, and corrected animate-config.json to fit the way is expected to work by the documentation.

With the current fix I am finally able to use just the "shake" animation with only 624B instead of the 17Kb of the original file 😄

gulpfile.js Outdated
target.push('source/' + category + '/' + files[i] + '.css');
count += 1;
for (file in files) {
var isActive = files[file];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variables should not be created inside a loop. Please fix this.

@eltonmesquita
Copy link
Collaborator

Fix the small problem and I think I can merge this PR!

@vrescobar
Copy link
Contributor Author

Fixed, however since the variable is local (declared as var, not using global scope) and has better legibility than using "files[file]" I don't see the issue. I find that giving a name is more self documenting than the comment I had to add.

@eltonmesquita
Copy link
Collaborator

You can just use something like:

var isActive;
for (file in files) {
   isActive = files[file]
}

This way you get the benefits without the problem of declaring variables inside a loop.
Ps.: This shouldn't be a problem in the ES6+ world as we do have let and const.

@eltonmesquita eltonmesquita mentioned this pull request Jul 29, 2017
@eltonmesquita eltonmesquita merged commit ff65094 into animate-css:master Nov 10, 2017
kaypeter87 added a commit to kaypeter87/animate.css that referenced this pull request Sep 9, 2019
* Update README.md

Add badge for Npm.

* fix headings (animate-css#685)

* Fix broken Markdown headings (animate-css#689)

* fix a bug (animate-css#709)

Resolve the problem after calling the animateCss() method can not continue to call other jQuery methods

* Made class list a Markdown table (animate-css#698)

* recommend using SRI hashes and `crossover` attributes (animate-css#647)

* Consistent spacing (animate-css#720)

* Add jsDelivr links (animate-css#745)

* Readme file update for using columns on classes names. (animate-css#744)

* Edit autoprefixer browser options (animate-css#721)

New browser options provide wider support for browsers.

* Fixed Custom Builds  (animate-css#695)

* Fixed Custom Builds in order accept partial builds using animate-config.json (bug in gulpfile)

* Update gulpfile.js

* Added callback for jQuery extension (animate-css#601)

Added to the extension for JQuery, callback function.

* Fix

* prettier rules

* Format files

* rename scrip

* EOL

* Update the devDependencies, Fix build failing status, and some minor changes! (animate-css#766)

* Update the devDependencies

* Update the gitignore file

* Update the version of gulp

* Fix the build error in the gulpfile script

* Update node version testing for travis

* Add CDNJS version badge in readme (animate-css#643)

* Update prettier

* Ignore fixed

* More info in editorconfig

* Move css properties to appropriate location (animate-css#761)

* 修改gitignore中的文件 (animate-css#773)

* Update license year (animate-css#775)

* Added npm start script

* Solves animate-css#461

* Fixes animate-css#644

* Added windows thumbs and Desktop.ini to gitignore

* 3.6.0

* Version bump

* 3.6.1

* 😃 Add hertBeat animation as a fix to issue animate-css#829

* Update Readme to include heartBeat animation within the list of animate classes available 👍

* Minor Updates and Small Fixes (animate-css#790)

* Update the devDependencies

* Update the gitignore file

* Update the version of gulp

* Fix the build error in the gulpfile script

* Update node version testing for travis

* Update the package.json

* Fix some errors

* Update the devdependencies

* Re arrange the .gitignore

* Update devdependency to the latest stable version

* Add new line at the end of the file

* Fix versioning error

* Update DevDependencies

* Update the version from 3.6.1 into 3.6.2

* Add delays up to 5 seconds

* Update the files from 3.6.1 into 3.6.2

* Modify the documentation and add delay option

* Verbose opacity (animate-css#788)

* Remove webkit prefixes 🎉

* Bit change in the code structure 😃

* Bit of change in the code structure 😃👍

* Fixed typos 😃

* Fix Firefox flip bug (animate-css#805)

* Resolve merge conflicts

Co-Authored-By: gianjohansen <gian.johansen@gmail.com>

* Add heartBeat to animate.min.css with gulp 🎉

* Resolve conflicts 👍

* Update Readme to use correct build/dev dependency badges

* Add new animation speed & delay classes

3.7.0 New Feature: Animation speed & delay classes, dependency updates

* Add support for prefers-reduced-motion media query (animate-css#832)

Feat: add prefers-reduced-motion media query

Improve accessibility by respecting the user's preference

* Update homepage field (animate-css#859)

* Improved some examples

* add yarn (animate-css#865)

* Fix typo in README.md (animate-css#862)

* Cleaning up the Readme file (animate-css#872)

* Cleaning up the Readme file

* Removed note about CSS prefixes

* Update devdependencies (animate-css#888)

* Update devdependencies
* Replace package-lock file with shrinkwrap

* Turn off animations for print media query (animate-css#881)

Resolves animate-css#856

* Add a feature to turn off animations for printing as requested.
* Add print media type
* Update the builds

* Update examples to pure js. closes animate-css#875 (animate-css#899)

I keept things simple and dropped support for aging browsers in the examples, although IE11 still gets support.

* Updated year on License

* Create CODE_OF_CONDUCT.md

Closes animate-css#902.

* Added Code of conduct to Readme

* Updated prefers-reduced-motion support on readme

*  Fixed the name of the function in README.md (animate-css#915)

`animateCss` to `animateCSS` because that's what is used as an example after.

* Update _base.css

* Update _base.css

* Update _base.css

* Update _base.css

* Compiled source

* 3.7.1

* Upped version

* remove npm-shrinkwrap

* add npm-shrinkwrap.json to .gitignore

* 3.7.2

* HTTPS link to opensource.org/licenses/MIT (animate-css#943)

* Updated CDN version

* Added feedback request on README

* Updated formatting on README

* Remove `sudo npm` from instructions (animate-css#952)

Running `npm` as root has a lot of disadvantages (ref: https://medium.com/@ExplosionPills/dont-use-sudo-with-npm-still-66e609f5f92). Modern versions of npm allow running tools from `node_modules/.bin` by calling `npx`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants