Javascript 尝试在按钮中重新创建涟漪效果动画时出现错误（材质设计）

我试图模仿点击按钮时的涟漪效应，但当我高兴地点击时，我会有奇怪的行为。我用vanilla JS编写代码是为了学习。谁能告诉我哪里弄错了？ 以下是完整的代码：

Html Js

var-ripple=document.getElementsByClassName（“ripple”）；
对于（变量i=0；i

我的：

---

Disired:

嗨，我知道你想做什么了，我也试着解释一下奇异效应。无论如何，我试着做了一些事情，它成功了，将.circle.animate设置为简单的.animate，并将比例（1）更改为比例（1,1），比例（宽度、高度）设置。 内部样式的更改包括：

.animate {
animation: ripple 2s forwards;
-webkit-animation-name:ripple;
-webkit-animation-duration: 2s;
}
@keyframes ripple {
from {
  transform: scale(1,1);
  opacity: 0.4;
}
to {
  transform: scale(100,100);
  opacity: 0;
  }
}

---

这是你的电话号码。对于chrome和safari支持，添加了-webkit-property。

您好，我明白您的意图，我也尝试解释了bizzare效应。无论如何，我试着做了一些事情，它成功了，将.circle.animate设置为简单的.animate，并将比例（1）更改为比例（1,1），比例（宽度、高度）设置。 内部样式的更改包括：

.animate {
animation: ripple 2s forwards;
-webkit-animation-name:ripple;
-webkit-animation-duration: 2s;
}
@keyframes ripple {
from {
  transform: scale(1,1);
  opacity: 0.4;
}
to {
  transform: scale(100,100);
  opacity: 0;
  }
}

---

这是你的电话号码。对于chrome和safari支持，添加了-webkit-property。

您是否知道codepen.io上的公共笔已经可以免费使用了？我看不出在您已经有了完全符合您需要的代码的情况下，尝试调试非工作代码有多大意义。此外，您似乎没有在自己的代码中努力修复该错误。如果可以，请将代码简化为一个示例，说明您遇到的问题。否则，这个问题很可能会被关闭为离题。如果我使用已经做过的东西，我不会学到任何东西。我确实尝试过修复它，这就是我寻求帮助的原因，除了我的是原始JavaScript而不是jQuery，我已经知道如何使用jQuery，它很棒，但我需要了解更多。我清理了我的代码，现在它工作得更好了，但仍然不能像我想的那样工作。你知道codepen.io上的公共笔已经可以在一个新的环境下免费使用了吗？我看不出在您已经有了完全符合您需要的代码的情况下，尝试调试非工作代码有多大意义。此外，您似乎没有在自己的代码中努力修复该错误。如果可以，请将代码简化为一个示例，说明您遇到的问题。否则，这个问题很可能会被关闭为离题。如果我使用已经做过的东西，我不会学到任何东西。我确实尝试过修复它，这就是我寻求帮助的原因，除了我的是原始JavaScript而不是jQuery，我已经知道如何使用jQuery，它很棒，但我需要了解更多。我清理了我的代码，现在它工作得更好了，但仍然不能像我想的那样工作。谢谢你的帮助！这不是问题所在。我解决了这个奇怪的行为，现在效果好多了，但现在还没有。如果我们点击几次，有时涟漪效应从坐标0，0开始。我更新了我的代码，如果你想看的话，你可以看一下。谢谢你，伙计！谢谢你的帮助！这不是问题所在。我解决了这个奇怪的行为，现在效果好多了，但现在还没有。如果我们点击几次，有时涟漪效应从坐标0，0开始。我更新了我的代码，如果你想看的话，你可以看一下。谢谢你，伙计！

var ripple = document.getElementsByClassName("ripple");

for (var i = 0; i < ripple.length; i++) {
    ripple[i].addEventListener("click", function(e) {
        // Store this for later
        var self = this;

        // Get x and y coordinates
        var x = e.offsetY+"px";
        var y = e.offsetX+"px";

        // Create the layer effect and apply a circle class,
        // then set coordinates
        var circle = document.createElement("div");
        circle.setAttribute("class", "circle");
        circle.style.top = x;
        circle.style.left = y;

        // Append layer effect to parent and add animate class
        // to start the animation
        self.appendChild(circle);
        self.className += " animate";

        // Remove layer effect once is done animating (2 seconds)
        setTimeout(function() {
            var elements = self.getElementsByClassName("circle");
            for (var i = 0; i < elements.length; i++) {
                 self.removeChild(elements[i]);
            }
        }, 2000);
    }, false);
}

.animate {
animation: ripple 2s forwards;
-webkit-animation-name:ripple;
-webkit-animation-duration: 2s;
}
@keyframes ripple {
from {
  transform: scale(1,1);
  opacity: 0.4;
}
to {
  transform: scale(100,100);
  opacity: 0;
  }
}