Ion-button ripple effect duration

distante · August 16, 2020, 8:31am

Hi, I am trying to orquestrate some animation that will be trigger on a button click, for this I need to know the duration of the ion-button ripple effect but I can not find this info anywhere.

Does anyone knows the exact duration of the ripple effect?

Thanks

indraraj26 · August 19, 2020, 6:08pm

It is around 325ms

github.com

ionic-team/ionic-framework/blob/753fd2f910e718438e3ac918e2f129501d8e9791/core/src/components/ripple-effect/ripple-effect.tsx

import { Component, ComponentInterface, Element, Host, Method, Prop, h, readTask, writeTask } from '@stencil/core';

import { getIonMode } from '../../global/ionic-global';

@Component({
  tag: 'ion-ripple-effect',
  styleUrl: 'ripple-effect.scss',
  shadow: true
})
export class RippleEffect implements ComponentInterface {

  @Element() el!: HTMLElement;

  /**
   * Sets the type of ripple-effect:
   *
   * - `bounded`: the ripple effect expands from the user's click position
   * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
   *
   * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,

This file has been truncated. show original

distante · August 19, 2020, 6:08pm

Thanks, eventually I had to look there too! It should be documented somewhere. I think.