时间戳

首页 > 解决方案 > 如何修复：每次用户单击按钮时 CSS 动画都会重置

javascript - 如何修复：每次用户单击按钮时 CSS 动画都会重置

问题描述

我的页面上有 3 个按钮（男性、女性、非性别），它们会导致角色在页面上弹跳。当前，当用户单击第二个按钮时，第一个按钮的字符会不断弹跳。如何使它只有一个按钮的字符反弹？下面的 JavaScript 代码：

const allDivs = Array.from(document.querySelectorAll('div'))

const mainHeader = document.querySelector('header')

let maleButton = document.createElement('button')
maleButton.textContent = 'Male Characters'
maleButton.addEventListener('click', () => {
    maleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s'
    })
});

let femaleButton = document.createElement('button')
femaleButton.textContent = 'Female Characters'
femaleButton.addEventListener('click', () => {
    femaleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});

let otherButton = document.createElement('button')
otherButton.textContent = 'Non-Gender Characters'
otherButton.addEventListener('click', () => {
    otherCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});

mainHeader.appendChild(maleButton)
mainHeader.appendChild(femaleButton)
mainHeader.appendChild(otherButton)

标签： javascripthtmlcss

解决方案

您需要使用“this”，如果您的按钮位于“div”中，请尝试编写：

 this.parentElement.className = 'animated infinite bounce delay-2s;

代替：

 matchedDiv.className = 'animated infinite bounce delay-2s;'

推荐阅读