Skip to content

Add a feature to turn off animations for printing as requested. - #856

Merged
daneden merged 4 commits into
animate-css:devfrom
warengonzaga:dev
Aug 22, 2018
Merged

Add a feature to turn off animations for printing as requested.#856
daneden merged 4 commits into
animate-css:devfrom
warengonzaga:dev

Conversation

@warengonzaga

Copy link
Copy Markdown
Member

Hello, @daneden and @eltonmesquita I just add this feature as requested. This is for this feature request #821 let's make it available for version 4.0. will add more feature as requested.

@daneden

daneden commented Aug 13, 2018

Copy link
Copy Markdown
Collaborator

It might make more sense to add the rule to the media query that already exists for reduced motion

@warengonzaga

Copy link
Copy Markdown
Member Author

@daneden you're right!

@warengonzaga

Copy link
Copy Markdown
Member Author

hey @daneden they are using different @media querry...

@media (prefers-reduced-motion) {
  .animated {
    animation: unset !important;
    transition: none !important;
  }
}

@media print {
  .animated {
    animation: none!important;
  }
}

how I can mix them up?

@warengonzaga

Copy link
Copy Markdown
Member Author

Hey @daneden look at this...

I change it to this code...

@media print and (prefers-reduced-motion) {
  .animated {
    animation: unset !important;
    transition: none !important;
  }
}

it makes more sense now? Am I right?

@eltonmesquita

Copy link
Copy Markdown
Collaborator

Hello @warengonzaga . The feature is ok, but you missed building it. Can you update the PR so I can merge?

Comment thread source/_base.css Outdated
}

@media (prefers-reduced-motion) {
@media print and (prefers-reduced-motion) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

This should be a logical or, not an and:

@media (print), (prefers-reduced-motion) {
  ...
}

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Awesome! Thanks @daneden

@daneden daneden left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Left a comment inline, but the media query will actually not work right now for either print or prefers-reduced-motion since it's now an and instead of or condition.

@warengonzaga

Copy link
Copy Markdown
Member Author

@daneden and @eltonmesquita I'm done.... :) is good now?

@daneden
daneden merged commit f535cd9 into animate-css:dev Aug 22, 2018
daneden pushed a commit that referenced this pull request Jan 13, 2019
Resolves #856

* Add a feature to turn off animations for printing as requested.
* Add print media type
* Update the builds
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 <[email protected]>

* 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`.
eltonmesquita added a commit that referenced this pull request May 7, 2020
* New animations added

* Update

* Update

* Update

* Update

* kill bower

* Turn off animations for print media query (#856)

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

* Moved away from gulp to npx + postcss

This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files.
* Solves #618
* Solves #836
* Also solves #758 just for fun ;P

* Updated travis and removed animate-config.json

* Removed strayed gulpfile and trimmed the header

* Moved prefix config to package.json and updated the tasks

* Updated travis

* Updated dependencies and postcss config

* Now using CSS custom properties

* Add css module file - solves #933

* Updated README for the new build

* Rebulit files

* Updated dependencies + added browserlist

* Fixed small typo on README

* Added imports to Back animations

* Added FadeInTopLeft.css file

Fade in the animation diagonally

* Added fadeInTopRight.css file

Fade in the animation diagonally

* Added fadeInBottomLeft.css

* Added fadeInBottomRight.css

* Added fadeOutTopLeft.css

* Added fadeOutTopRight.css

* Added fadeOutBottomRight.css

* Added fadeOutBottomLeft.css

* Added imports to diagonal fadings

* Aditional formatting

* Added diagonal fadings to README

* Fixes #966

* Animate.css v4 Updates (#1029)

* Update to v4

* Add Iteration-Count CSS utility classes solves #998

* Updated builds

* Update lightSpeed animations

* Update builds

* Fix Invalid CSS Media Query Syntax

* Update build

* Add gitpod support

* Add newline in gitpod file

* Update README

* Revert

* Declare variable

* Update builds

* Remove Gitpod support

Co-authored-by: Waren Gonzaga <[email protected]>

* Improves building process and package.json tidy up

* Improved animations (#901)

* Improved bounce

* Improved pulse

* Improved bounceInDown

* Improved bounceInLeft

* Improved bounceInRight

* Improved bounceInUp

* Improved bounceOutDown

* Improved bounceOuLeft

* Improved bounceOuRight

* Improved bounceOutRight

* Improved fadeInDown

* Improved fadeInDownBig

* Improved fadeInLeft

* Improved fadeInLeftBig

* Improved fadeInRightBig

* Improved fadeInUp

* Improved fadeInUpBig

* Improved fadeInRight

* Reverted fade animations

* Compiled

* Updated prefers-reduced-motion support on README

* Add .delay-1s (#982)

The .delay-1s is missing from the readme

* HTTPS relevant links on README (#972)

prevents HTTP redirects

* Create CONTRIBUTING.md (#1033)

Co-authored-by: Melek REBAI <[email protected]>
Co-authored-by: Christian Oliff <[email protected]>
Co-authored-by: Daniel Eden <[email protected]>

* Updates dependencies

* Updates prettier config

* refactory transform-origin in styles

* animation shake with X and Y options 🔨

* Adds shakeX and shakeY to the build

* Set 0 Opacity to Out animation classes (#1043)

* Update issue templates

* Add 0 opacity to out classes

* Update builds

* Improved implemenation

* Update builds

* Update current readme

* Update builds

Co-authored-by: Elton Mesquita <[email protected]>
Co-authored-by: Waren Gonzaga <[email protected]>

* Removes prefix from att selector

* Feature/new demo site (#1046)

* Simplify & centralize the Animate.css home page. Finally.

* Design tweak

* Fix Lightspeed demos

* Fix Lightspeed demos (cont.)

* Trigger animation on change as well as click

* Correct jQuery example. Fixes #127

* Remove Readme on gh-pages to prevent mistakes like ee75b81

* Use animate.min.css because whatever

* Update demo page with MS animation JS hooks.

* Updating home page with rubberBand animation.

* Reverse hue animation

Red-orange-brown isn’t a great first impression.

* Add readme, use cssmin minified CSS instead of csso

* Update gh-pages

* Remove protocol from urls

Fixes Chrome’s SSL issue

* Remove Square Cash link

Donations are weird, and only US account holders could use this.

* Updating Gh-page animate.css to the current version

This is a simple commit, bringing animate.css up to date with the current master version.

* Updating Gh-page animate.min.css to reflect the current version

This is a simply update to the Animate.min.css file, to reflect the current version

* Update CSS

* Updating Gh-page index.html to the reflect the addition of zooms (in out down etc)

This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown.

* refactoring index.html to mimic the current optgroup styling

I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately.

* updated index.html to reflect the standard optgroup styling on sliders, added slideInDown

In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations.

* Merging updated version of animate.min.css

As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request.

* Updated animate.min.css

Made it the new version

* added jello to options

* Update CSS

* Add jackInTheBox to gh-pages (#694)

* New Special - jackInTheBox

* copy min.css from master branch

* fixed the issue of overflow scroll (#740)

for more see this issue #739

* Adds heartBeat animation demo (#893)

* Update animate.min.css to latest version

* Updated CSS for current browsers

* Updated animate.css

* Removed useless test folder

* Added warn about prefers-reduced-motion

* Adds docs compiler

* Adds new base template

* Improves the docs compiler

* Fixes flipOutY animation

* Updates docs template and build

* Reorder docs sections

* Updates docs animation list template

* Updates prettier ignore

* Adds syntax highlight to docs

* Small fixes to docs content

* Updates templates HTML

* Styles the demo website

* Adds functionality to demo website

* Fixes small website demo issue with medium screens

* Adds copy animation to demo site

* Renames loop classes to repeat

* Small adjusts to docs styles

* Updates docs template

* Updates docs  improving copy and adding sections

* Reviews the docs copy

* Fix some issues with demo-site

* Fixes issue with the demo-site playground

* Adjusts tooltip on demo-site

* Fix layout issues on mobile and update “close” button for animations list

Co-authored-by: Daniel Eden <[email protected]>
Co-authored-by: Matt Willis <[email protected]>
Co-authored-by: Gabrielmtn <[email protected]>
Co-authored-by: Indy Prieto <[email protected]>
Co-authored-by: Robert Pemberton <[email protected]>
Co-authored-by: Khaled nuur <[email protected]>
Co-authored-by: Vladimir Jovanović <[email protected]>

* Updates docs folders

* Fix some small documentation issues

* Updates edit on github link

Co-authored-by: Arda Gedik <[email protected]>
Co-authored-by: Arda Gedik <[email protected]>
Co-authored-by: Jabran Rafique <[email protected]>
Co-authored-by: Waren Gonzaga <[email protected]>
Co-authored-by: Jabran Rafique⚡️ <[email protected]>
Co-authored-by: Vaibhav Tandon <[email protected]>
Co-authored-by: Waren Gonzaga <[email protected]>
Co-authored-by: Melek REBAI <[email protected]>
Co-authored-by: Christian Oliff <[email protected]>
Co-authored-by: Daniel Eden <[email protected]>
Co-authored-by: Lucas Ferreira Lima <[email protected]>
Co-authored-by: Matt Willis <[email protected]>
Co-authored-by: Gabrielmtn <[email protected]>
Co-authored-by: Indy Prieto <[email protected]>
Co-authored-by: Robert Pemberton <[email protected]>
Co-authored-by: Khaled nuur <[email protected]>
Co-authored-by: Vladimir Jovanović <[email protected]>
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.

3 participants