CSS 水波纹效果

React 水波纹效果

本文将介绍如何使用 React 实现一个简单的水波纹效果。

步骤

1. 首先，在你的 React 组件中，创建一个 div 元素，用于渲染水波纹效果。

<div className="ripple-container"></div>

2. 创建一个函数，用于获取鼠标点击位置。

const getClickPosition = (e) => {
  const rect = e.target.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  return {x, y};
}

3. 为组件添加一个点击事件监听器，当用户点击时，获取鼠标点击位置，并在该位置绘制一个水波纹圆圈。

const handleClick = (e) => {
  const {x, y} = this.getClickPosition(e);
  const ripple = document.createElement('div');
  ripple.classList.add('ripple-effect');
  ripple.style.top = `${y}px`;
  ripple.style.left = `${x}px`;
  this.rippleRef.current.appendChild(ripple);
}

4. 为水波纹元素添加 CSS 样式，使其具有水波纹的特效。

.ripple-effect {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(0);
  animation: ripple 0.4s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

5. 最后，在组件中渲染一个包含水波纹效果的 div 元素，并将其引用保存到组件的 ref 属性中，以便在点击事件处理函数中使用它。

import React, { useRef } from 'react';
const rippleRef = useRef(null);

return (
    <div className="water-wave-wrapper" onClick={handleClick}>
      <div ref={rippleRef} className="ripple-container">
        水波纹效果
      </div>
    </div>
);

现在，你已经成功地实现了一个简单的水波纹效果。你可以通过调整 CSS 样式和 JavaScript 代码，来实现更复杂的效果。

完整示例

Vue 水波纹

在 Vue 中，我们可以使用以下步骤来实现水波纹效果。

1. 安装依赖

使用npm或者yarn安装以下依赖：

npm install --save @vueuse/core

2. 创建水波纹组件

在 Vue 中，我们可以通过v-wave指令来实现水波纹效果。因此，我们需要创建一个单独的组件来封装v-wave指令。

<template>
  <div class="wave-container" v-wave="color">
    <slot></slot>
  </div>
</template>

<script>
import { wave } from '@vueuse/core'

export default {
  name: 'Wave',
  props: {
    color: {
      type: String,
      default: '#fff'
    }
  },
  directives: {
    wave
  }
}
</script>

<style scoped>
.wave-container {
  position: relative;
  display: inline-block;
}
</style>

在上面的代码中，我们使用v-wave指令来实现水波纹效果，并将其封装在一个名为Wave的组件中。组件接受一个color属性，用于指定水波纹的颜色。

3. 在父组件中使用水波纹组件

在父组件中，我们可以像使用普通的HTML标签一样使用水波纹组件。

<template>
  <div>
    <Wave color="#ff0000">
      <button>Click me</button>
    </Wave>
  </div>
</template>

<script>
import Wave from '@/components/Wave.vue'

export default {
  name: 'App',
  components: {
    Wave
  }
}
</script>

在上面的代码中，我们在父组件中使用了Wave组件，并将其包裹在一个按钮元素中。 现在，我们已经完成了水波纹组件的创建并在父组件中使用它。当我们点击按钮时，就可以看到水波纹效果了。

总结

通过点击动态创建带有水波效果的 dom 元素，就可以实现效果