Trying a new layout to prevent flickering on mouse hovering

LeaVerou / animatable

One property, two values, endless possiblities

http://leaverou.github.io/animatable

2.59k stars 659 forks source link

Trying a new layout to prevent flickering on mouse hovering #33

Closed hsablonniere closed 10 years ago

hsablonniere commented 13 years ago

Hi Lea,

We talked about "problems" with mouse hovering and the layout of the boxes in #10.

I took different tries and thoughts on the problem. It seems that adding markup in not an option to achieve what we want.

I'm just sharing my thoughts out here. There's probably naming stuffs etc to improve and refactoring to do. For example we don't really need classes on that new invisible background div...

Please let me know what you think about it ?

As you advised me, I'm prepared for your perfectionism ;-)

LeaVerou commented 13 years ago

Hi there,

sorry for the delay, I've been really busy with conferences and travelling.

Thanks for the effort you've put into this. Nice work :)

I'm not very fond of the idea of changing the markup. We can add extra elements through the script, so the initial markup should not be repetitive in any way. Repetition is for machines, not humans :)
Perhaps the code changes might be simpler if the id was on the wrapper. Or perhaps a plain div/span could be appended inside the and we could have the inner div get animated instead of the . I think that would result in the least possible changes.

hsablonniere commented 13 years ago

I hesitated on the extra markup vs script code, I didn't really have strong position on that one. OK to handle it with script code. It will keep HTML clean for people who wants to add effects.

About the wrapping, I'll try both ideas and we'll see pros and cons...

Thanks for the remarks :)