Javascript CSS3关键帧动画问题，带有；“时间表”；

在下面的示例中，我有3个div，它们需要使用CSS3关键帧动画和以下规则设置动画（当我在下面的文本中提到隐藏/显示时，实际上在CSS中使用不透明度0.1/1）：

A） 当页面加载时

• 显示了ladyDefault
• 淑女是隐藏的
• 荣夫人被藏起来了

B） 当用户单击“更正”时

• 这是隐藏的错误
• 显示ladyCorrect
• 荣夫人被藏起来了

C） 当用户点击btnWrong时

• 这是隐藏的错误
• 淑女是隐藏的
• 秀给荣夫人看

目前：

• 顺序案例A）和B）工作正常

• 顺序案例A）和C）工作正常

但我无法修复以下情况：

• 顺序情况A）和B）以及C）不起作用（未显示ladyWrong）

• 顺序情况A）和C）以及B）不起作用（未显示ladyCorrect）

我想知道如何修复它可能只使用CSS 3

仅使用Google Chrome测试以下示例

var btnCorrect=document.getElementById（'btnCorrect'）；
var btnWrong=document.getElementById（'btnWrong'）；
var ladyDefault=document.getElementById（'ladyDefault'）；
var ladyCorrect=document.getElementById（'ladyCorrect'）；
var ladyWrong=document.getElementById（'ladyWrong'）；
btnCorrect.addEventListener（'click'，函数（事件）{
lasslist.add（'hideLadyDefault'）；
classList.add（'hideladyError'）；
ladyCorrect.classList.add（'showLadyCorrect'）；
});
btnWrong.addEventListener（'click'，函数（事件）{
lasslist.add（'hideLadyDefault'）；
ladyCorrect.classList.add（'hideLadyCorrect'）；
ladyWrong.classList.add（'showLadyWrong'）；
});
#ladyDefault，
#淑女纠正，
#小姐{
宽度：100px；
高度：150像素；
显示：内联块；
保证金：5px；
}
#女士过错{
背景颜色：蓝色；
}
#淑女矫正{
背景颜色：绿色；
不透明度：0.1；
}
#小姐{
背景色：红色；
不透明度：0.1；
}
#b不正确，
#btnWrong{
高度：50px；
宽度：100px；
显示：内联块；
保证金：5px；
}
#b纠正{
背景色：石灰；
}
#btnWrong{
背景色：暗色；
}
/*
---------------------------女士违约
*/
@关键帧hideLadyDefault{
0% {
不透明度：1；
}
100% {
不透明度：0.1；
}
}
.hideLadyDefault{
动画名称：hideLadyDefault；
动画持续时间：0；
动画迭代次数：1；
动画方向：正常；
动画填充模式：正向；
动画延迟：0；
}
/*
---------------------------女士正确
*/
@关键帧显示LadyCorrect{
0% {
不透明度：0.1；
}
100% {
不透明度：1；
}
}
.表示尊敬{
动画名称：showLadyCorrect；
动画持续时间：1s；
动画迭代次数：1；
动画方向：正常；
动画填充模式：正向；
动画延迟：0；
}
@关键帧隐藏正确{
0% {
不透明度：1；
}
100% {
不透明度：0.1；
}
}
.hideLadyCorrect{
动画名称：hideLadyCorrect；
动画持续时间：0；
动画迭代次数：1；
动画方向：正常；
动画填充模式：均为
动画延迟：0；
}
/*
---------------------------女士错了
*/
@关键帧showLadyWrong{
0% {
不透明度：0.1；
}
100% {
不透明度：1；
}
}
秀小姐{
动画名称：showLadyWrong；
动画持续时间：1s；
动画迭代次数：1；
动画方向：正常；
动画填充模式：正向；
动画延迟：0；
}
@关键帧隐藏错误{
0% {
不透明度：1；
}
100% {
不透明度：0.1；
}
}
Hidelady先生错了{
动画名称：HideladyError；
动画持续时间：0；
动画迭代次数：1；
动画方向：正常；
动画填充模式：两者都有；
动画延迟：0；
}
ladyDefault
淑女矫正
小姐
b纠正
btnWrong
原始答案：

在添加新类之前，还需要删除以前的类。如果在添加新类之前不删除另一个类，则每个类都会尝试在同一元素上设置
动画
，与CSS的情况一样，CSS中稍后定义的选择器（类）将获胜


var btnCorrect=document.getElementById（'btnCorrect'）；
var btnWrong=document.getElementById（'btnWrong'）；
var ladyDefault=document.getElementById（'ladyDefault'）；
var ladyCorrect=document.getElementById（'ladyCorrect'）；
var ladyWrong=document.getElementById（'ladyWrong'）；
btnCorrect.addEventListener（'click'，函数（事件）{
lasslist.add（'hideLadyDefault'）；
ladyWrong.classList.remove（'showLadyWrong'）；
classList.add（'hideladyError'）；
ladyCorrect.classList.remove（'hideLadyCorrect'）；
ladyCorrect.classList.add（'showLadyCorrect'）；
});
btnWrong.addEventListener（'click'，函数（事件）{
lasslist.add（'hideLadyDefault'）；
ladyCorrect.classList.remove（'showLadyCorrect'）；
ladyCorrect.classList.add（'hideLadyCorrect'）；
classList.remove（'hideladyError'）；
ladyWrong.classList.add（'showLadyWrong'）；
});
#ladyDefault，
#淑女纠正，
#小姐{
宽度：100px；
高度：150像素；
显示：内联块；
保证金：5px；
}
#女士过错{
背景颜色：蓝色；
}
#淑女矫正{
背景颜色：绿色；
不透明度：0.1；
}
#小姐{
背景色：红色；
不透明度：0.1；
}
#b不正确，
#btnWrong{
高度：50px；
宽度：100px；
显示：内联块；
保证金：5px；
}
#b纠正{
背景色：石灰；
}
#btnWrong{
背景色：暗色；
}
/*
---------------------------女士违约
*/
@关键帧hideLadyDefault{
0% {
不透明度：1；
}
100% {
不透明度：0.1；
}
}
.hideLadyDefault{
btnCorrect.addEventListener('click', function(event) {
    ladyDefault.classList.add('hideLadyDefault');
    ladyWrong.classList.add('hideLadyWrong');
    ladyCorrect.classList.add('showLadyCorrect');
    ladyCorrect.classList.remove('hideLadyCorrect'); //added
});
btnWrong.addEventListener('click', function(event) {
    ladyDefault.classList.add('hideLadyDefault');
    ladyCorrect.classList.add('hideLadyCorrect');
    ladyWrong.classList.add('showLadyWrong');
    ladyWrong.classList.remove('hideLadyWrong'); //added
});