vue 通过自定义命令给项目按钮增加水波纹效果

kh lemon — Fri, 20 Sep 2024 03:42:52 +0000

设计思路增加全局的自定义命令v-ripple，使用v-ripple的元素通过element.appendChild 增加子元素，给子元素增加水波纹的动画效果，同时监听animationend，在动画结束后移除子元素

水波纹样式

 [ripple] { position: relative; overflow: hidden; }
 [ripple] .ripple { 
      position: absolute;
      color: black;
      border-radius: 100%; 
      transform: scale(0);
      pointer-events: none;
      animation: ripple .4s ease-out; }
 @keyframes ripple { to {transform: scale(2); opacity: 0; } }

增加水波纹节点

  function ripple(event, target) {
    let node;
    node = document.createElement("div");
    node.className = "ripple";
    /** 点击目标矩阵尺寸 */
    const rect = target.getBoundingClientRect();
    /** 当前自定义颜色值，默认是白色透明 */
    const color = target.getAttribute("ripple") || "rgba(255, 255, 255, .45)";
    console.log("target.getAttribute",target.getAttribute("ripple"));
    console.log("color",color);

    /** 波纹大小 */
    let size = Math.max(rect.width, rect.height);
    // 设置最大范围
    if (size > 200) size = 200;
    // 设置大小
    node.style.height = node.style.width = size + "px";
    // 设置波纹颜色
    node.style.backgroundColor = color;
    // 这里必须输出节点后再设置位置，不然会有问题
    target.appendChild(node);

    const y = event.touches ? event.touches[0].clientY : event.clientY;
    const x = event.touches ? event.touches[0].clientX : event.clientX;
    const top = y - rect.top - (node.offsetHeight / 2);
    const left = x - rect.left - (node.offsetWidth / 2);
    // console.log(top, left);
    node.style.top = top + "px";
    node.style.left = left + "px";

    function end() {
      node.removeEventListener("animationend", end);
      // console.log("动画结束", node);
      target.removeChild(node);
      ripplePool.push(node);
    }
    node.addEventListener("animationend", end);
  }

增加自定义指令

  Vue.directive("ripple", {
    inserted(el, binding) {
      el.setAttribute("ripple", binding.value);
      el.addEventListener(eventType, function (e) {
        ripple(e, el);
      });
    }
  })

DEV Community: kh lemon

vue 通过自定义命令 给项目按钮增加水波纹效果

vue 通过自定义命令给项目按钮增加水波纹效果