Skip to content

docs(ripple): mention terminateOnPointerUp option #9825

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

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/lib/core/ripple/ripple.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,22 @@ const globalRippleConfig: RippleGlobalOptions = {
}
};
```

### Animation behavior

There are two different animation behaviors for the fade-out of ripples shown in the Material
Design specifications.

By default, all ripples will start fading out if the mouse or touch is released and the enter
animation completed. The second possible behavior, which is also shown in the specifications, is
that ripples start to fade out immediately on mouse or touch release.

In some scenarios, developers might prefer that behavior over the default and would like to have
the same for Angular Material. This behavior can be activated by specifying the
`terminateOnPointerUp` global ripple option.

```ts
const globalRippleConfig: RippleGlobalOptions = {
terminateOnPointerUp: true
};
```