Add 'swipe away' functionality to the left / right nav #614
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Resolves mui#411. If a user opens the nav on a touch device, they can use the swipe gesture they're used to to close the nav. Technical details: I initially tried setting nav's translateX and overlay's opacity using setState, but turns out that on mobile devices re-rendering the component on every touchmove event is costly and leads to laggy animations. So I resorted to directly manipulating elements' styles, which is a lot faster.
|
@pomerantsev Should the swipe be on the nav menu, not the overlay? |
|
There will be slightly more code (since on touchmove we'll have to determine whether the user is trying to scroll the menu if it's long enough, or if they're swiping the nav away). Anyway, it should look better this way, so I'll make the change. |
The swipe gesture can now originate over both the overlay and the nav itself.
|
@hai-cea I made it so that it works when swipe starts over the nav as well. The code correctly handles the case when the user is scrolling and not swiping. Check it out. |
hai-cea
added a commit
that referenced
this pull request
May 12, 2015
Add 'swipe away' functionality to the left / right nav
|
Thanks @pomerantsev 👍 |
Closed
zannager
added
the
package: styles
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #411.
If a user opens the nav on a touch device, they can use the swipe
gesture they're used to to close the nav.
Technical details: I initially tried setting nav's translateX and
overlay's opacity using setState, but turns out that on mobile devices
re-rendering the component on every touchmove event is costly and
leads to laggy animations.
So I resorted to directly manipulating elements' styles, which is
a lot faster.