通过CSS或Javascript制作伪类动画

Question

我做了a set of social button on Codepen，用来分享东西。但是我遇到了一些 CSS 或 Javascript 问题。我想让 .sharer::before，每个按钮的菱形和彩色背景，在点击事件后移动到顶部。

按钮的正常状态（小三角形是菱形背景的角）

在悬停状态下，按钮被整个菱形背景填充。

点击按钮后，菱形背景会飞到最上面。

我做了一个.success class的名字，点击按钮后有成功的状态，但是Javascript这个块似乎是错误的。我只想将 .success 添加到已单击的 .sharer 中。 (Codepen)

function addSuccess(currentClass) { 
 document.getElementsByClassName(currentClass).classList.add("success");
}

document.getElementsByClassName("sharer").addEventListener("click", addSuccess("sharer"), false);

Answer 1

你需要的是：

var shares = document.getElementsByClassName("sharer");

function addSuccess() {
  this.classList.add('success');
}

Array.prototype.forEach.call(shares, function(share) {
  share.addEventListener('click', addSuccess);
});

您的代码不起作用的原因是它采用 all 类名称为 'share' 的元素，并试图将事件侦听器添加到 HTMLCollection 本身。您需要的是将此事件侦听器添加到 every 元素。您可以通过 forEach 方法执行此操作，但这是 Array 对象的方法，因此您必须使用 Array.prototype.forEach.call(shares, fn)- 这允许您在 HTMLCollection 上使用 Array 方法。

在提供的 fn 中，您将每个元素作为参数传递（函数（share）），您将事件侦听器添加到其中。在事件侦听器的函数中，您可以访问 this - 它是一个元素，您向其中添加了事件。

为了更好的理解，我的回答不能提供，你可以看看MDN。

Answer 2

小心 getElementsByClassName，returns 一个数组个元素，而 addEventListener 应该在 上调用单个个元素。

如果您使用像 jQuery 这样的帮助程序库，您就可以完成类似的操作，而不必担心要操作多少元素。

对于像你这样的普通元素，你应该遍历元素数组。

另一个问题在您的 addSuccess 函数中：您如何 select 将新 class success 应用到的特定元素？按原样（虽然在添加迭代之后），它会盲目地将新的 class 应用于每个元素。

最后，addEventListener 将函数作为第二个参数，而不是表达式（就像带参数的函数）。如果调用 addSuccess("sharer") 返回了一个函数，它就会起作用。

结果代码：

function addSuccess(event) { 
    var clickedButton = event.target;
    clickedButton.classList.add("success");
}

var buttons = document.getElementsByClassName("sharer");

for(var i = 0; i < buttons.length; i += 1) {
    buttons[i].addEventListener("click", addSuccess, false);
}

演示：http://codepen.io/anon/pen/PPeLRp

请注意，在添加 success class 后，您还缺少 CSS 将钻石贴在顶部的规则。照原样，您的钻石只有在悬停时才会到达顶部。

缺少的规则：

.sharer.success::before {
    top: -208%;
}

通过CSS或Javascript制作伪类动画

Make animation to pseudo classes by CSS or Javascript

javascript

css

click

addeventlistener

getelementsbyclassname