当正确的方法出错时 (When the right way goes wrong)

Let’s say you want to create a click effect on an HTML button. The first idea that many people get is to do something that reproduces the feeling of the sound emitted by a real button. Here is a simple pulse effect:

假设您要在HTML按钮上创建点击效果。 许多人得到的第一个想法是做一些能够重现真实按钮发出声音的感觉的事情。 这是一个简单的脉冲效果：

To create a button effect, in HTML/CSS, you have only three states to choose from:

要创建按钮效果，在HTML / CSS中， 只有三种状态可供选择 ：

• :hover which is triggered by having your cursor over the button.

  :hover ，通过将光标悬停在按钮:hover触发。

• :focus which is triggered when you give focus to the button using your keyboard or by clicking it. For some browsers, the focus is given when you press your mouse button down. For others, it’s when you release it.

  :focus ，当您使用键盘或单击按钮将焦点放在按钮上时触发。 对于某些浏览器，当您按下鼠标按钮时会给出焦点。 对于其他人，就是您发布它的时间。

• :active which is triggered from the moment you press your mouse button down to when you release it.

  :active ，从按下鼠标按钮到释放鼠标之间触发。

According to this, it’s safe to assume that the good state to style is :active since it comes and goes as you press the button, right? Depending on the effect you want to create, that can be absolutely wrong.

据此，可以安全地认为样式的良好状态是:active因为在您按下按钮时它就会来回移动，对吗？ 根据要创建的效果，这可能是绝对 错误的 。

This is what will happen in our case if we use :active:

如果使用:active这就是我们的情况：

Looking closely, you can see our pulse effect triggering on click, then immediately reverting to nothing. What happened?

仔细观察，您会发现我们的脉冲效果在点击时触发，然后立即恢复为零。 发生了什么？

了解问题 (Understanding the problem)

This pulse effect takes 300ms to go through its whole animation. A mouse click lasts anywhere between ≈15ms (gaming mouse) and 200+ ms (laptop trackpad).

此脉冲效果需要300毫秒才能经历整个动画。 鼠标单击的持续时间介于≈15ms (游戏鼠标) 和200+ ms (笔记本电脑触控板)之间。

You guessed it, your CSS transition, although set to 300ms, will stop halfway because the :active state will disappear. You can’t control the actual transition duration this way. Many developers don’t notice that when implementing short or static effects, but in our case, it just can’t work.

您猜对了，您CSS过渡尽管设置为300ms，但会中途停止，因为:active状态将消失。 您无法通过这种方式控制实际的过渡时间。 许多开发人员没有注意到在实现短效果或静态效果时，但是在我们的情况下，它根本无法工作。

解决方案 (The solution)

There are two tricks to achieve this effect. The first one is to start the click effect when the mouse button is released. To do so, the state you are looking for is :not(:active).

有两种技巧可以达到这种效果。 第一个是在释放鼠标按钮时开始单击效果 。 为此，您正在寻找的状态是:not(:active) 。

By using this state, the animation will start when the :active state disappears, and there will be no limit for the transition duration!

通过使用此状态，动画将在:active状态消失时开始，并且过渡持续时间没有限制！

But there is one more thing: it should only animate one way. You must put the transition property for this effect under the :not(:active) selector. If you don’t, the transition will try to go back and forth and result in a weird effect or simply no effect at all.

但是还有一件事： 它只能以一种方式进行动画处理 。 您必须将此效果的transition属性放在:not(:active)选择器下。 如果您不这样做，则过渡将尝试来回移动，从而导致怪异的效果，或者根本没有效果。

For this effect, I actually styled the :before pseudo-element. Here is the relevant part of the code:

为此，我实际上设置了:before伪元素的样式。 这是代码的相关部分：

The previous sample illustrates our case very well but needs some more code to work. You can get the full code sample in this gist.

前面的示例很好地说明了我们的情况，但是还需要更多代码才能工作。 您可以 在本要点中 获得完整的代码示例 。

Now you can unleash your best transitions and create crazy click effects that won’t stop randomly! Here is another example that goes for a whole second:

现在，您可以释放最佳的过渡效果，并创建不会随机停止的疯狂点击效果！ 这是一秒钟的例子：

Just remember that this method is using transitions, and not keyframes, which are managing their own timelines.

请记住，此方法使用的是过渡，而不是关键帧，它们是在管理自己的时间轴。

This method works really well with pseudo-elements and you should get some fun hours creating weird stuff with it (I did). If you need more than two elements, just put divs inside the button tag.

这种方法对伪元素非常有效，您应该花一些时间来创建一些奇怪的东西(我这样做了)。 如果需要两个以上的元素，只需将div放在button标记内。

结论 (Conclusion)

What you need to remember to create beautiful click effects using this method:

使用此方法创建漂亮的点击效果需要记住的内容：

• You must target the :not(:active) selector so that the animation starts at the end of a click.

  您必须定位:not(:active)选择器，以便动画在单击结束时开始 。

• The transition property for your effect also need to be set on the :not(:active) selector, so that the transition goes only one way.

  还需要在:not(:active)选择器上设置效果的过渡属性，以便过渡只能以一种方式进行 。

• It only uses transitions because keyframes manage their own timelines.

  它仅使用过渡，因为关键帧管理自己的时间轴。

• Using pseudo-elements or internal div tags allow you to create effects outside of the button.
  使用伪元素或内部div标签可让您在按钮外部创建效果。

Have fun animating!

玩得开心！