Javascript 通过添加类来设置文本元素的动画，并通过删除类将其设置回初始颜色的动画

如果出于某种原因我不想给我的元素赋予颜色类（我只是给它一个类名以便能够选择它，但我希望颜色类不附加到元素）

如何在颜色之间切换？我的意思是动画颜色从蓝色到红色和动画再次从红色到蓝色

这是一个丑陋的解决方案，我在这里，但我认为应该有一个更好和更干净的方法，可能使用纯CSS像切换一个类，当类是附加元素是蓝色的，如果它删除元素动画回到红色

const text=document.querySelector（“.myClass”）；
text.addEventListener（“单击”，函数（）{
if（text.classList.contains（“changeBlue”））{
text.classList.add（“changeRed”）；
text.classList.remove（“changeBlue”）；
}else if（text.classList.contains（“changeRed”））{
text.classList.add（“changeBlue”）；
text.classList.remove（“changeRed”）；
}否则{
text.classList.add（“changeRed”）；
}
})

@关键帧已更改动画{
来自{color:blue}
至{颜色：红色}
}
.变了{
动画名称：changeRedAnime；
动画持续时间：.5s；
动画填充模式：正向；
}
@动画的关键帧{
来自{color:red}
至{颜色：蓝色}
}
.变色蓝{
动画名称：changeBlueAnime；
动画持续时间：.5s；
动画填充模式：正向；
}
.myClass{
用户选择：无；
颜色：蓝色；
光标：指针；
}

---

这是一个示例文本。

另一种方法是将css类名存储在数组中，并使用一些

索引访问增量模

魔术

示例

const text=document.querySelector（“.myClass”）；
const classList=text.classList；
常量值=[“changeBlue”，“changeRed”]
设它=0；
text.addEventListener（“单击”，函数（）{
移除（值[it++%2]）；
添加（值[it%2]）；
})

@关键帧已更改动画{
来自{color:blue}
至{颜色：红色}
}
.变了{
动画名称：changeRedAnime；
动画持续时间：.5s；
动画填充模式：正向；
}
@动画的关键帧{
来自{color:red}
至{颜色：蓝色}
}
.变色蓝{
动画名称：changeBlueAnime；
动画持续时间：.5s；
动画填充模式：正向；
}
.myClass{
用户选择：无；
颜色：蓝色；
光标：指针；
}

---

这是一个示例文本。

对于@Józef Podlecki的回答有很好的JS，但我也想改进您的CSS。你不需要在

动画中进行如此大规模的构造<代码>过渡：颜色。5s线性就足够了

或者您可以从一开始就设置一些默认颜色类，然后只切换类


const text=document.querySelector（“.myClass”）；
text.addEventListener（“单击”，函数（）{
text.classList.toggle（“红色”）；
text.classList.toggle（“蓝色”）；
})
.myClass{
用户选择：无；
光标：指针；
过渡：颜色。5s线性；
}
瑞德先生{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}
这是一个示例文本。
更新了一点。请看。