How to add CSS transitions to create open/close effect on a custom modal window

Question

I have a DIV with default display:none. It uses the class overlay defined as:

.overlay
{
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:200;
  width:100%;
  height:100vh;
  background:black;
}

Clicking a button, I simply add it the following class with jQuery:

.open {
  display:block;
}

As you can see, it is simply rendered as a full window overlay.

I would like to add some opening/closing effect and not simply toggle it's display property, (fade or translate, I don't know yet what).

I would like to use CSS transitions but how to add them in the correct way? The problem is obviously more evident at closing because I anyway need to apply display:none; at the end of closing transition.

This question might help you: stackoverflow.com/questions/7302824/… — adamk22
– adamk22, Commented Sep 30, 2016 at 10:00
If you don't know what effect you want yet this is way too broad. — Paulie_D
– Paulie_D, Commented Sep 30, 2016 at 10:18
I can understand what you're saying but don't agree. I'm asking for general principle and not the complete solution. The main problem is how to combine need to toggle none and block for display and transition on other properties. As commented on User1111's solution changing z-index from -1 could seem the exact trick — Luca Detomi
– Luca Detomi, Commented Sep 30, 2016 at 12:07

user6879896 · Accepted Answer · 2016-09-30 10:02:59Z

3

.overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease-in-out;
}

.open {
    display: block;
    opacity: 1;
    z-index: 200;
}

I didn't try it but what I understand in CSS3 is we're not allowed to animate display property. That's why I put opacity and tried to change some style. Just try. Maybe try to check gsap tweenmax. Easy to use and much better in terms of performance.

answered Sep 30, 2016 at 10:02

user6879896

Sign up to request clarification or add additional context in comments.

3 Comments

Luca Detomi Over a year ago

Very interesting and simple solution. The key is z-index:-1 as default. Just a puntualization: is necessary to remove display:none and display:block. I don't know why but with these properties, also opacity transition does not work (at least in Firefox)

Luca Detomi Over a year ago

In addition, it surely solve the problem at "opening". To have transition also on closing is necessary to set it to all properties, so: transition: all 0.5s ease-in-out;

user6879896 Over a year ago

@LucaDetomi maybe, you're right. What I always did is using oncomplete function in tweenmax to change the display value. Maybe just remove display because you already toggle the z-index. It's up to you. Depends on how you want your system works. Cheers

adamk22 · Accepted Answer · 2016-09-30 10:20:57Z

1

You could use the show(x) jQuery function, where x is the milliseconds you want the fade to last. And .hide() to hide the element.

See: http://api.jquery.com/show/ & http://api.jquery.com/hide/

answered Sep 30, 2016 at 10:20

adamk22

6115 silver badges19 bronze badges

1 Comment

Luca Detomi Over a year ago

I know this but as I wrote, I would like to use CSS transitions for optimal performances

Blue · Accepted Answer · 2021-09-18 17:33:26Z

1

If you want to use transitions for open/close events, you have to use visibility instead of display. actually this issue is thoroughly diccussed in the following post:

What is the difference between visibility:hidden and display:none?

and your answer is in one comment by Michael Deal:

It's important to keep css-transitions into mind when talking about visibility vs. display. For example, toggling from visibility: hidden; to visibility: visible; allows for css-transitions to be used, whereas toggling from display: none; to display: block; does not. visibility: hidden has the additional benefit of not capturing javascript events, whereas opacity: 0; captures events. – Michael Deal

answered Sep 18, 2021 at 17:33

Blue

577 bronze badges

Collectives™ on Stack Overflow

How to add CSS transitions to create open/close effect on a custom modal window

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related