v0.7.1: Voters Widget Expand/Collapse Animation

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

Just added an expand/collapse animation to the voters widget body.

To accomplish this a CSS transition on the max-height property was used.
I’ve had to make some changes to the Body component to wait for the end of this transition before loading the visible avatars, to have the container viewport reached its final hight.

Notice how the vertical scrollbar track is now always present even when it would not be needed. This is to prevent visual glitches for few-votes widgets where the scrolling is it not needed.

Another point to note is how the max-height transition to 50vh causes a too fast expansion on low-votes widgets, typically when there is only a row of avatars.

Additionally, it was added a zoom transition when hovering on the avatars(the images are very tiny though, 30px, so the zoomed version is a bit blurry) and now the voter profile page opens in a new tab.

Advertisements

Published by

mgiulio

Front End Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s