featherlight
featherlight copied to clipboard
noelboss
Layered featherlight close animation
When you open two featherlight boxes and click away/close the first there is a flicker as the background fades and then hides, suddenly showing the darker background of the box underneath.
Yes, indeed. With the last-of-type css rule, only the frontmost lightbox darkens the screen. As this fades, the screen lights up. When the frontmost dialog gets removed, the last-of-type target changes and the screen darkens suddenly.
I'm not too sure what to do about it though.
How about switching to first-of-type?
Ahh, never mind - then the problem will be if the second featherbox is on top of a larger featherbox
Mmm, that could work. Otherwise I guess I could check for nested case, and if it's nested, fade the content only. Your solution is the simplest though, let me check...
So, first-of-type doesn't work with classes, but even if it would (or using the workaround with ~), the problem is that it needs to be the last one, coz we want to dim the content of the upper lightbox too...
So back to my solution I guess.
Maybe the solution is to have a few rules. I haven't run any test but I'm thinking something like:
:only-of-type {
background: rgba(0, 0, 0, 0.8);
}
:last-of-type {
background: rgba(0, 0, 0, 0.5);
}
::nth-last-of-type(2) {
background: rgba(0, 0, 0, 0.3);
}
Or else accept that the second window will dim the screen even further, i.e. just have background: rgba(0, 0, 0, 0.8) apply to all featherlights.
Mmm, or use your "first-of-type" idea, but when opening/closing a nested featherlight, we fade-out/in the previous content box, that could look nice and no flicker I think...
Yip I was thinking of something with css transitions as well so when the last-of-type box disappears css transitions kick in (I think they should).
Just for reference, I was having further issues that turned out to be related to this ":last-of_type" selector https://github.com/iamceege/tooltipster/issues/369. The idea there was to put all the featherlights into one div. I think that's pretty useful. If you want me to open a new issue I will but I think perhaps it could help solve this problem:
<div class="feather-wrapper">
<div class="featherlight">featherlight #1</div>
<div class="featherlight">featherlight #2</div>
<div class="featherlight">featherlight #3</div>
</div>
Now ".feather-wrapper" gets
background: rgba(0, 0, 0, 0.8);
But ".featherlight" gets
.featherlight {
opacity: 0;
}
.featherlight:nth-last-of-type(2) {
opacity: 0.3;
}
.featherlight:last-of-type {
opacity: 1;
}
I'm not sure, but perhaps css transitions can animate the opacity variable for us when number 3 closes and the second featherlight ends up on top with the first now becoming visible.
Anyway nesting inside a div would be useful to me for tooltipster
Just to note working towards solution here I've added
<div class="featherlight-holder"></div>
to the end of my <body> (which is modified and ends up with stuff after it anyway) but using
$.featherlight.defaults.root = $(".featherlight-holder")
has solved the bug with tooltipster. Next step the fading. This is useful functionality in my mind though - I would say worth making the default...?
Okay, my solution (which I'm pretty happy with thus far) is:
.featherlight-holder {
position:fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.8);
}
.featherlight-holder:empty {
display: none;
}
.featherlight {
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.featherlight:nth-last-of-type(2) {
opacity: 0.3;
}
.featherlight:last-of-type {
opacity: 1;
background: none;
}
I like that solution. It probably could have been designed this way from the get go. I'm not too sure how to integrate it and stay compatible with people customizing their root option though. Also :empty is cute, but won't work in IE8. Easy to do in JS though.
It's a long time since I looked at any of this code but how about making them mutually exclusive? That is, "If you want to customise your root, then figure out your own way of handling layers."
@jcuenod You saved my life with your workaround. The default background is flickering when displaying an Google Map at each call of google.maps.event.trigger(map, 'resize') event. Thanks !
@jcuenod You said "Next step the fading" but didn't post a solution 😢. Here is a simple workaround (hotfix).
In featherlight.js around line 314 next to :
self.$instance.fadeOut(self.closeSpeed,function(){ self.$instance.detach(); self.afterClose(event); deferred.resolve(); });
Add :
if($(self.root + ' > .' + self.namespace).size() == 1) { $(self.root).fadeOut(self.closeSpeed,function(){ $(self.root).css('display',''); }); }
It works with stacked boxes.