Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add transition UX polish for lightbox animations #14126

Merged
merged 2 commits into from Mar 20, 2018

Conversation

cathyxz
Copy link
Contributor

@cathyxz cathyxz commented Mar 20, 2018

  1. We want to hide controls and text description until the transition is complete.
  2. If the text description is in overflow mode at time of closing the lightbox, we want it to be set to standard the next time the lightbox opens.
  3. We want to separate the animation for toggling controls from the show / hide state.
  4. Maintain consistency with gallery view.

There's probably a better way to decompose some of this code though.

this.carousel_.setAttribute('controls', '');

this.topBar_.classList.remove('fade-out');
this.topBar_.classList.remove('hidden');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might be an existing bug, but purely using opacity to show/hide still keeps the area "tappable", worth a tests

(also normally I would say we need to also set aria-hidden when using opacity for hiding and showing, but honestly I think it is better to always have the controls readable by screen readers in this case, specially given there are only a few)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Merely a suggestion, haven't looked at the full diff.)

Can pointer-events: none be an alternative in this case?

Copy link
Contributor Author

@cathyxz cathyxz Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add visibility: hidden?

@cathyxz cathyxz merged commit 84a316e into ampproject:master Mar 20, 2018
@cathyxz cathyxz mentioned this pull request Mar 20, 2018
@cathyxz cathyxz deleted the feature/transition-ctrls branch May 9, 2018 21:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants