Vue は水の波紋効果のクリックフィードバック指示を実装します

.my-ripple {
  位置: 絶対;
  上: 0;
  左: 0;
  zインデックス: 100;
  境界線の半径: 50%;
  背景色: 現在の色;
  不透明度: 0;
  遷移: 変換 0.2 秒 キュービックベジェ (0.68, 0.01, 0.62, 0.6)、不透明度 0.08 秒 線形;
  will-change: 変換、不透明度;
  ポインタイベント: なし;
}

関数computeRippleStyles(要素、イベント) {
  const { 上、左 } = element.getBoundingClientRect()
  const { clientWidth, clientHeight } = 要素
  
  定数半径 = Math.sqrt(クライアント幅 ** 2 + クライアント高さ ** 2) / 2
  定数サイズ = 半径 * 2
  
  const localX = event.clientX - 左
  const localY = event.clientY - 上部

  定数 centerX = (クライアント幅 - 半径 * 2) / 2
  定数 centerY = (クライアントの高さ - 半径 * 2) / 2

  定数 x = ローカルX - 半径
  定数 y = ローカルY - 半径

  {x、y、centerX、centerY、サイズ}を返します
}

関数createRipple(イベント) {
  const コンテナ = this
  const { x, y, centerX, centerY, サイズ } = computeRippleStyles(コンテナ, イベント)
  const リップル = document.createElement('div')
  ripple.classList.add('my-ripple')
  ripple.style.opacity = `0`
  ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
  ripple.style.width = `${size}px`
  ripple.style.height = `${size}px`
  // 水波の生成時刻を記録します。ripple.dataset.createdAt = String(performance.now())

  const { 位置 } = window.getComputedStyle(コンテナ)
  container.style.overflow = '隠し'
  位置 === '静的' && (this.style.position = '相対')

  コンテナ.appendChild(リップル)

  ウィンドウ.setTimeout(() => {
    ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
    ripple.style.opacity = `.25`
  })
}

定数VRipple = {
  マウント(el) {
    el.addEventListener('mousedown', リップルを作成します)
  }
}

関数removeRipple() {
  const コンテナ = this
  const リップル = container.querySelectorAll('.my-ripple')
  波紋の長さが等しい場合
    戻る
  }

  const lastRipple = ripples[ripples.length - 1]
  // 水の波の作成時間に基づいて拡散アニメーションの実行にかかる時間を計算して、各水の波が拡散アニメーションを完了するようにします。const delay = 300 - performance.now() + Number(lastRipple.dataset.createdAt)

  タイムアウトを設定する(() => {
    lastRipple.style.opacity = `0`
    
    タイムアウトを設定します(() => lastRipple.parentNode?.removeChild(lastRipple), 300)
  }、 遅れ）
}

定数VRipple = {
  マウント(el) {
    el.addEventListener('mousedown', リップルを作成します)
    document.addEventListener('mouseup', リップルを削除)
  },
  アンマウント(el) {
    el.removeEventListener('mousedown', createRipple)
    document.removeEventListener('mouseup', リップルの削除)
  }
}