search

peduarte / wallop

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

Use visibility to hide element from pointer events #57

Closed daviddarnes closed 9 years ago

daviddarnes commented 9 years ago

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 commented 9 years ago

Thanks, will take a proper look.

daviddarnes commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

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

peduarte commented 9 years ago

after some research...

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

interesting!

daviddarnes commented 9 years ago

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

peduarte commented 9 years ago

Merged, thanks man!

daviddarnes commented 9 years ago

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

peduarte commented 9 years ago

:+1: