issues
search
LeaVerou
/
inspire.js
Lean, hackable, extensible slide deck framework. Previously known as CSSS.
https://inspirejs.org
MIT License
1.73k
stars
254
forks
source link
nested "delayed" class
#16
Open
y-yu
opened
12 years ago
y-yu
commented
12 years ago
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
` result
hoge
foo
It does NOT work on Chorome, Opera and Safari. "foo" is shown by "opacity 0.3". But, I designate "color" property by "rgba". `
hoge
foo
` result
hoge
foo
And, I use "visibility" property in order to appear characters. 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.
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
` result- hoge
- foo
It does NOT work on Chorome, Opera and Safari. "foo" is shown by "opacity 0.3". But, I designate "color" property by "rgba". `- hoge
- foo
` result- hoge
- foo
And, I use "visibility" property in order to appear characters. 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.