Use visibility to hide element from pointer events

[daviddarnes]

Re: https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/

Basically I used Wallop, it was awesome, but I couldn't select the content of the currently viewed item. I used visibility: hidden to hide the element. This means the user can interact with the currently viewed item but still allow the item to transition to the next item.

Fixes #56 and #54.

[peduarte]

Thanks, will take a proper look.

[daviddarnes]

@peduarte no problem. After closer inspection I thought it might not work as I've only applied the hidden state in the keyframe animations, but it appears to work fine ¯_(ツ)_/¯

[peduarte]

That's what I was thinking.
I will take a proper look at the fade file.
I originally wrote it thinking it'd be used more as a slideshow, containing only an image and therefore not needing any interaction.
Seems like a lot of people's use case is different.

It's a matter of getting the right z-index.

You should have the same problem if you use the scale animation, I guess?

[daviddarnes]

@peduarte possibly, I haven't tried that animation type yet.

I can understand your use case. The problem with it is that it's too good! Users, like myself, are using it for more than just images and you didn't expect it to be used in such a complex way.

I think the z-index ordering is fine how you have it, it just need to hide the element from pointer events which visibility should cover. I'm using the fix and it's working ok.

[peduarte]

That's a good point.
I prefer not to add "non-animatable" preterites in keyframes to be honest.
But will keep this PR in mind for sure.

[daviddarnes]

@peduarte that seems fair, however the linked article actually shows you can animate visibility. You just need the opacity to make is smooth.

[peduarte]

after some research...

visibility animates despite the CSS Basic Box Model spec saying “Animatable: no”

interesting!

[daviddarnes]

@peduarte pretty cool ay! But shhh, the spec might hear you and change its mind 😉.

[peduarte]

Merged, thanks man!

[daviddarnes]

No no, thank you! Also, thank you for making this Pen http://codepen.io/peduarte/pen/bVbZLK?editors=001 💜

[peduarte]

👍