當正確的方法出錯時 (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!

玩得開心！