LeaVerou/CSSS — Issue #16: nested "delayed" class
Author: yoshimuraYuu
Created: 2011-10-08 00:38:51+00:00
State: open

I want to make nested "delayed" class.

hogehoge

foofoo

When "foo" is shown,
"hoge" is added "displayed" class, and "foo" is added "current" class.

hoge

foo

But, class "delayed", "displayed" and "current" use "opacity" property.
"opacity" property influence child node.
Then

hoge

foo

It does NOT work on Chorome, Opera and Safari.
"foo" is shown by "opacity 0.3".

So I change "slideshow.css".

.delayed,
.delayed-children > * {
visibility: hidden;
color: rgba(0,0,0,0);

-webkit-transition:1s color;

/*-moz-transition:.7s opacity;
-o-transition:.7s opacity;
transition:.7s opacity;
*/
}

.delayed.current,
.delayed-children > .current,
.delayed.displayed.non-dismissable,
.delayed-children > .displayed.non-dismissable {
visibility: visible;
color: rgba(255,255,255,1);
}

.delayed.displayed,
.delayed-children > .displayed {
visibility: visible;
color: rgba(255,255,255,0.3);
}

It works on Safari.