如何添加 onClick animation？

Question

我一直在制作帶有教程的文字冒險游戲。 我要添加的是使選項 I select 慢慢淡出。

問題是，如果我嘗試更改課程，我會破壞它並且它不再可玩，因為已經有一些 class 更改，我無法理解如何在不破壞游戲的情況下做到這一點。 我可以使用 hover 效果transition: all 1s ease-out但我想要做的是在我點擊選項時實現這一點，而不是在我點擊它時實現 hover。 我還嘗試更改 selectOption function 但是當我添加一些東西時它總是出錯。

html的選項：

<div id="text">Text</div>
<div id="option-buttons" class="button-grid">
  <button class="button">Option 1</button>
  <button class="button">Option 2</button>
  <button class="button">Option 3</button>
  <button class="button">Option 4</button>
</div>

游戲功能及html要素：

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')

let state = {}

function startGame() {
  state = {}
  showTextNode(1)
}

function showTextNode(textNodeIndex) {
  const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
  textElement.innerText = textNode.text
  while (optionButtonsElement.firstChild) {
    optionButtonsElement.removeChild(optionButtonsElement.firstChild)
  }

  textNode.options.forEach(option => {
    if (showOption(option)) {
      const button = document.createElement('button')
      button.innerText = option.text
      button.classList.add('button')
      button.addEventListener('click', () => selectOption(option))
      optionButtonsElement.appendChild(button)
    }
  })
}

function showOption(option) {
  return option.requiredState == null || option.requiredState(state)
}

function selectOption(option) {
  const nextTextNodeId = option.nextText
  if (nextTextNodeId <= 0) {
    return startGame()
  }
  state = Object.assign(state, option.setState)
  showTextNode(nextTextNodeId)
}
An example of options:

const textNodes = [
  {
    id: 1,
    text: 'You wake up in a strange place and you see a jar of blue goo near you.',
    options: [
      {
        text: 'Take the goo',
        setState: { blueGoo: true },
        nextText: 2
      },
      {
        text: 'Leave the goo',
        nextText: 2
      }
    ]
  },

如何將 onClick animation 添加到這些選項中？

Answer 1

您可以嘗試將函數/動畫直接添加到您的代碼中。 像這樣：

<div id="text">Text</div>
<div id="option-buttons" class="button-grid">
  <button class="button" onclick="animation(this)">Option 1</button>
  <button class="button" onclick="animation(his)">Option 2</button>
  <button class="button" onclick="animation(this)">Option 3</button>
  <button class="button" onclick="animation(this)">Option 4</button>
</div>

function animation (obj) {oby.class = "animation"}

您需要在 CSS 中指定 class animation 。