peduarte / wallop

:no_entry: currently unmaintained :no_entry: A minimal JS library for showing & hiding things
1.1k stars 79 forks source link

Previous slides block the current slides when you use wallop--fade.css #54

Closed Gilberto06 closed 9 years ago

Gilberto06 commented 9 years ago

Hello, I love this library but I think improving this tiny detail could make it even better.

If the current slide have buttons or a div with scroll they won't work unless you send the previous slides back (z-index: 0) at the end of the animation.

You'll probably find a better solution but changing this in the wallop--fade.css fixed the issue for me:

/ .Wallop--fade .Wallop-item--hidePrevious, .Wallop--fade .Wallop-item--hideNext { z-index: 2; }/ .Wallop--fade .Wallop-item--showPrevious, .Wallop--fade .Wallop-item--showNext { z-index: 1; }

/========== FADE ANIMATIONS ==========/ @-webkit-keyframes fadeOut { 0% { opacity: 1; z-index: 2; } 99% { opacity: 0; z-index: 2; } 100% { opacity: 0; z-index: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; z-index: 2; } 99% { opacity: 0; z-index: 2; } 100% { opacity: 0; z-index: 0; } } @-ms-keyframes fadeOut { 0% { opacity: 1; z-index: 2; } 99% { opacity: 0; z-index: 2; } 100% { opacity: 0; z-index: 0; } } @keyframes fadeOut { 0% { opacity: 1; z-index: 2; } 99% { opacity: 0; z-index: 2; } 100% { opacity: 0; z-index: 0; } }

peduarte commented 9 years ago

Thanks for this. Will take a better look when I get home. Quick question, which version of wallop at you using? @Gilberto06 Can you create a Codepen or jsfiddle with a demo of the problem, please?

Gilberto06 commented 9 years ago

wallop-2.2.2

Here you can see the problem: http://codepen.io/Gilberto06/pen/pjrMgd

And here you'll find a CSS fix: http://codepen.io/Gilberto06/pen/XmavRx

On Mon, Oct 12, 2015 at 11:58 PM, Pedro Duarte notifications@github.com wrote:

Thanks for this. Will take a better look when I get home. Quick question, which version of wallop at you using?

ā€” Reply to this email directly or view it on GitHub https://github.com/peduarte/wallop/issues/54#issuecomment-147532559.

Gilbert

peduarte commented 9 years ago

Thanks, I'll take a look. šŸ‘

hnqso commented 9 years ago

Po mano arruma ai

peduarte commented 9 years ago

This should be fixed now. Please download latest release. https://github.com/peduarte/wallop/releases/tag/v2.2.3

Test: http://codepen.io/peduarte/pen/NGXJoV

Thanks!