Toggle-Display-Animate
Support CSS3 Animations from objects styled with display:none.
Toggle Display CSS3 Animation
Allow keyframe CSS3 animations and reversal of animations to run on elements styled with display property.
Modern Browsers, Lightweight, Device Friendly, Skeleton Script.
Usage Case
- The need to create lightweight bespoke animation solutions.
- Have an html element hidden on the page using display:none; (Any method for hiding or displaying an object can be used!)
- On an event to display:block; or display:flex; etc. the element followed by a CSS3 Animation.
- Animation to run in reverse or run different animation and then display:none; at the end of the animation.
- Can be used to trigger animation events in general. Showing and hiding elements is optional.
Dependencies
-
Any version of loaded in the page <head> — v3.2.1 Tested
- An SCSS or LESS compiler.
Quick Installation
Only required file from the project is js/jquery-toggleDisplayAnimate.js Use of the mixins FROM less or scss folder is optional but recommended. jQuery Extension
Place the jQuery Extension script before the closing <body> tag or after jQuery.
JavaScript Standalone
The standalone version can be placed in the document <head>
Creating Animations
Example below uses import/animation/mixins ; helps you to write cross browser compatible animations.
There are 3 special css class names used for the functionality:
- .display — (Optional) The visibility styling of the object using any css method to render it but can be used for anything.
- .animatied — The animation to use when displaying the element.
- .revert — (Optional) The animation to use when hiding the object.
HTML Markup
Creating a key frame (LESS)
Applying Animation to element (LESS)
Creating a key frame (SCSS)
Applying Animation to element (SCSS)
Trigger an animation
toggleDisplayAnimate toggles the .display class on the element. Functionality is similar to jQuery.toggleClass.
It would be good to note at this point that since we are using class toggles only, it is possible to remedy other uses for .display and .revet other than to toggle element visibility. You are only limited by you imagination
If triggered again before the animation is complete with .revert set and using reverse direction then the animation will stop and run backwards from its current keyframe position.
If .revert is not set, the animation stops and the css styles in class .display are dropped from the element.
Tested browsers
Windows
- Google Chrome v59 — v60
- Microsoft Edge v40
- Internet Explorer v11
- Firefox v41
- Opera v46
Mac OSX
- Safari v10
- Safari Technology Preview v35
Android 6.0.1
- Google Chrome v59 — v60
If a browser does not support CSS3 Animations then the elements will simply toggle their display state only with no animation.
There is no plan to create fallback Javascript based animations, There are other heavy weight projects this script is intended for modern browsers only.
Special Thanks
Mac Koniarek — Testing browser compatibility on Mac OSX
Toggle-Display-Animate is maintained by marcnewton. This page was generated by GitHub Pages.
How To Transition CSS “display: none;” Property On Click
Transitioning some CSS properties is impossible by default. However, there are some workarounds. One of the properties that cannot be transitioned by default is the “display” property. Transitioning the display’s value from “block” to “none” will not happen; there will be no transition at all, the change will happen instantly. Here’s an example.
A few reasons why the display property cannot be transitioned is because:
- The display property does not accept numbers as its value; If the property that is going to be transitioned does not have a number as its value, then the transition property may not transition it and that is because it needs numbers to do its calculations in order render the display
- When the display property is set to none, it takes the element out of the flow of the rendered HTML document instantly.
To solve this, a few lines of code need to be added.
The breakdown of the transitionBox function is:
Line 5–6: If the box’s display is “none” then set it to “block”.
Line 7: If the box’s height for some reason is set to 50px but it shouldn’t be, then set it to 0 so it can be transitioned back to 50px. I can actually omit this line and still be fine.
Line 8: Then make the height of the box to be set to 50px in 1 second.
Else
Line 10: Set the height of the box to 0
Line 11–16: Add the “transitionend” event listener to the box so that when the transition ends the display property of the box would be set to “none”. The option “
This code can bypass the fact that you cannot transition “display: none”. In fact, this code didn’t even transition the display property. It transitioned the height property of the box element and later set the display to none.
How to animate an element in display none in two steps
Animate a hidden element is very simple now. We just need 2 CSS declaration and a bit of JavaScript to toggle the state open / close.
The solution
In this article:
- CSS :not pseudo-selector
- Single Source of truth
- animationend event
- Accessibility
Problem we try to solve
You have a hidden element with a hidden attribute. To provide a better UX, you want to animate this opening and closing state. But in CSS, display:none is like an interrupter; it can be «on» or «off» but animate between both state with a CSS transition is impossible.
Step 1: animate during opening
Exit fullscreen mode
As you notice, I’m opting for a link instead of a button. Why ? Because my modal will still be accessible without JavaScript, thanks to the target CSS pseudo-class. I will focus on this point after.
JS to show the modal
Exit fullscreen mode
Exit fullscreen mode
That’s it. ¯_(ツ)_/¯.
If you prefer relying on .hidden class (like in Tailwind), you can switch :not([hidden]) with :not(.hidden) . If you want both, the not pseudo-class accept multiple arguments separated by a comma : not([hidden], .hidden) . Anyway, our Modal appears with a shiny animation now :
Step 2 : animate during closing
The closing state is a little more tricky. If you set the hidden attribute to «true», you won’t be able to hide it smoothly. You need to add a temporary class like is-closing to play the closing animation and then, hide the element.
Exit fullscreen mode
Exit fullscreen mode
Now our modal is closing smoothly, but it is not back to hidden state. You have to wait to the end of the animation to remove the .is-closing class and back to hidden=»true» . With setTimeout ? You could, but you have a better option.
Animationend event
With a timeout , we have to declare a value at least equal to the animation duration, which can change.
If you can, you have to have a single source of truth : here, the animation duration declared in the CSS.
The animationend will wait to the end of the animation, then execute the function inside the listener.
Exit fullscreen mode
Once the event is completely done, you have to destroy it with the once: true option, as you don’t need it anymore.
And voilà, you have the knowledge to animate any element hidden in the DOM.
Bonus : A little accessibility enhancement
Button vs Link
As I said above, I choose a <a> instead of a <button> because of that :
Exit fullscreen mode
Without JS, the modal can still be open via its hash, and you can style the opened state with the :target pseudo class.
To close it, the user needs to back in your history. This is why I hide the .modal-close . It’s not pertinent to show it if it can’t do anything.
Don’t play animation if user don’t want animation.
For personal taste, medical reason or to solve a performance issue on their device, your users may not want any animation, and you have to respect their preferences. It would be a good idea to embed the following the rule as part of your CSS reset, if it’s not already done.
CSS Animation and Display None
I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page.
When I attempt this at first div that slides in still takes up space even when it is not visible. If I change the div to display:none the div doesn’t slide in at all.
How do I have a div not take up space until it is timed to come in (using CSS for the timing.)
I am using Animate.css for the animations.
Here is what the code looks like:
As the code shows I would like the main div to be hidden and the other divs show at first. Then I have the following delay set:
It is at that point that I would like the main div to push the other divs down as it comes in.
How do I do this?
Note: I have considered using jQuery to do this, however I prefer using strictly CSS as it is smoother and the timing is a bit better controlled.
I have attempted what Duopixel suggested but either I mis-understood and am not doing this correctly or it doesn’t work. Here is the code: