2

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • This question might help you: http://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery – adamk22 Sep 30 '16 at 10:00
  • If you don't know what effect you want yet this is way too broad. – Paulie_D Sep 30 '16 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 Sep 30 '16 at 12:07

3 Answers3

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.

  • 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 Sep 30 '16 at 10:24
  • 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;` – Luca Detomi Sep 30 '16 at 10:26
  • @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 –  Oct 01 '16 at 02:40
0

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/

adamk22
  • 581
  • 4
  • 18
0

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

Blue
  • 43
  • 5