Created
January 25, 2015 12:28
-
-
Save ernstki/8c2444f377d02ef4427d to your computer and use it in GitHub Desktop.
Appearing/disappearing message box with CSS transitions only // source http://jsbin.com/yoyada
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Appearing/disappearing message box with CSS transitions only" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .box { | |
| border: 1px solid black; | |
| height: 5em; | |
| padding: 10px; | |
| } | |
| .box h4 { | |
| height: 1em; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .shown { | |
| /* The message box needs to have a fixed height (and probably | |
| some kind of way of handling overflow) if you want to | |
| animate on height. Ems and 'auto's don't seem to work. | |
| You could create a node, add it invisibly to the DOM to | |
| check its height, but that's JavaScript territory. */ | |
| /* The transition on visibility is necessary to prevent the | |
| transparent elements from preventing click-through to the | |
| other page elements (on Firefox, anyway). */ | |
| transition: | |
| opacity 0.5s linear, | |
| height 0.2s linear, | |
| visibility 0.2s linear; | |
| opacity: 1; | |
| height: 5em; | |
| visibility: visible; | |
| } | |
| .hidden { | |
| transition: | |
| opacity 0.2s linear, | |
| height 0.5s linear, | |
| visibility 0.2s linear; | |
| opacity: 0; | |
| height: 0; | |
| visibility: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>Some content before</p> | |
| <div id="message" class="box shown"> | |
| <h4>Error!</h4> | |
| <p>You've made an error.</p> | |
| </div> | |
| <p>Some other content after</p> | |
| <button id="toggle">Toggle visibility</button> | |
| <script id="jsbin-javascript"> | |
| var msg = document.getElementById('message'); | |
| var btn = document.getElementById('toggle'); | |
| btn.onclick = function(e) { | |
| if (msg.classList.contains('shown')) { | |
| msg.classList.remove('shown'); | |
| msg.classList.add('hidden'); | |
| } else { | |
| // Show the message | |
| msg.classList.remove('hidden'); | |
| msg.classList.add('shown'); | |
| } | |
| }; | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.box { | |
| border: 1px solid black; | |
| height: 5em; | |
| padding: 10px; | |
| } | |
| .box h4 { | |
| height: 1em; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .shown { | |
| /* The message box needs to have a fixed height (and probably | |
| some kind of way of handling overflow) if you want to | |
| animate on height. Ems and 'auto's don't seem to work. | |
| You could create a node, add it invisibly to the DOM to | |
| check its height, but that's JavaScript territory. */ | |
| /* The transition on visibility is necessary to prevent the | |
| transparent elements from preventing click-through to the | |
| other page elements (on Firefox, anyway). */ | |
| transition: | |
| opacity 0.5s linear, | |
| height 0.2s linear, | |
| visibility 0.2s linear; | |
| opacity: 1; | |
| height: 5em; | |
| visibility: visible; | |
| } | |
| .hidden { | |
| transition: | |
| opacity 0.2s linear, | |
| height 0.5s linear, | |
| visibility 0.2s linear; | |
| opacity: 0; | |
| height: 0; | |
| visibility: hidden; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var msg = document.getElementById('message'); | |
| var btn = document.getElementById('toggle'); | |
| btn.onclick = function(e) { | |
| if (msg.classList.contains('shown')) { | |
| msg.classList.remove('shown'); | |
| msg.classList.add('hidden'); | |
| } else { | |
| // Show the message | |
| msg.classList.remove('hidden'); | |
| msg.classList.add('shown'); | |
| } | |
| };</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .box { | |
| border: 1px solid black; | |
| height: 5em; | |
| padding: 10px; | |
| } | |
| .box h4 { | |
| height: 1em; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .shown { | |
| /* The message box needs to have a fixed height (and probably | |
| some kind of way of handling overflow) if you want to | |
| animate on height. Ems and 'auto's don't seem to work. | |
| You could create a node, add it invisibly to the DOM to | |
| check its height, but that's JavaScript territory. */ | |
| /* The transition on visibility is necessary to prevent the | |
| transparent elements from preventing click-through to the | |
| other page elements (on Firefox, anyway). */ | |
| transition: | |
| opacity 0.5s linear, | |
| height 0.2s linear, | |
| visibility 0.2s linear; | |
| opacity: 1; | |
| height: 5em; | |
| visibility: visible; | |
| } | |
| .hidden { | |
| transition: | |
| opacity 0.2s linear, | |
| height 0.5s linear, | |
| visibility 0.2s linear; | |
| opacity: 0; | |
| height: 0; | |
| visibility: hidden; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var msg = document.getElementById('message'); | |
| var btn = document.getElementById('toggle'); | |
| btn.onclick = function(e) { | |
| if (msg.classList.contains('shown')) { | |
| msg.classList.remove('shown'); | |
| msg.classList.add('hidden'); | |
| } else { | |
| // Show the message | |
| msg.classList.remove('hidden'); | |
| msg.classList.add('shown'); | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment