Layered featherlight close animation #126

jcuenod · 2015-03-26T11:34:03Z

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.

marcandre · 2015-03-26T13:19:34Z

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.

jcuenod · 2015-03-26T13:22:53Z

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

marcandre · 2015-03-26T13:26:24Z

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...

marcandre · 2015-03-26T13:33:46Z

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.

jcuenod · 2015-03-26T13:41:18Z

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);
}

marcandre · 2015-03-26T13:52:58Z

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.

marcandre · 2015-03-26T13:55:12Z

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...

jcuenod · 2015-03-26T13:56:21Z

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).

jcuenod · 2015-03-28T21:48:55Z

Just for reference, I was having further issues that turned out to be related to this ":last-of_type" selector calebjacob/tooltipster#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

jcuenod · 2015-03-29T15:20:40Z

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...?

jcuenod · 2015-03-30T22:26:33Z

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;
}

negativefix · 2015-11-07T19:58:19Z

Will @jcuenod's solution be included in featherlight? @marcandre

marcandre · 2015-11-08T03:28:38Z

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.

jcuenod · 2015-11-08T14:48:02Z

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."

Nukium · 2017-06-29T13:15:07Z

@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 !

Nukium · 2017-08-31T15:10:27Z

@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.

noelboss added the enhancement label Jun 3, 2015

marcandre assigned noelboss Aug 18, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Layered featherlight close animation #126

Layered featherlight close animation #126

jcuenod commented Mar 26, 2015

marcandre commented Mar 26, 2015

jcuenod commented Mar 26, 2015

marcandre commented Mar 26, 2015

marcandre commented Mar 26, 2015

jcuenod commented Mar 26, 2015

marcandre commented Mar 26, 2015

marcandre commented Mar 26, 2015

jcuenod commented Mar 26, 2015

jcuenod commented Mar 28, 2015

jcuenod commented Mar 29, 2015

jcuenod commented Mar 30, 2015

negativefix commented Nov 7, 2015

marcandre commented Nov 8, 2015

jcuenod commented Nov 8, 2015

Nukium commented Jun 29, 2017 •

edited

Loading

Nukium commented Aug 31, 2017 •

edited

Loading

Layered featherlight close animation #126

Layered featherlight close animation #126

Comments

jcuenod commented Mar 26, 2015

marcandre commented Mar 26, 2015

jcuenod commented Mar 26, 2015

marcandre commented Mar 26, 2015

marcandre commented Mar 26, 2015

jcuenod commented Mar 26, 2015

marcandre commented Mar 26, 2015

marcandre commented Mar 26, 2015

jcuenod commented Mar 26, 2015

jcuenod commented Mar 28, 2015

jcuenod commented Mar 29, 2015

jcuenod commented Mar 30, 2015

negativefix commented Nov 7, 2015

marcandre commented Nov 8, 2015

jcuenod commented Nov 8, 2015

Nukium commented Jun 29, 2017 • edited Loading

Nukium commented Aug 31, 2017 • edited Loading

Nukium commented Jun 29, 2017 •

edited

Loading

Nukium commented Aug 31, 2017 •

edited

Loading