CSS转换：如何'；闪光灯'；课内外

当我添加一个类时，我试图使一个元素立即变为一种颜色，然后当它被删除时，慢慢地淡出。我通过CSS转换实现了这一点，如下所示：

.base {
  background-color: #000000;
  transition: 1.5s background-color;
}

.base.extra {
  transition: 0s background-color;
  background-color: #00ff00;
}

这是可行的，但前提是我添加了“额外”类，然后将其作为单独的操作删除

$（'#添加'）。在(
“点击”，
职能（e）{
e、 预防默认值（）；
$（'.base'）.addClass（'extra'）；
}
)
$（“#删除”）。在(
“点击”，
职能（e）{
e、 预防默认值（）；
$（'.base'）.removeClass（'extra'）；
}
)
$（'#flash'）。在(
“点击”，
职能（e）{
e、 预防默认值（）；
$（'.base'）.addClass（'extra'）；
$（'.base'）.removeClass（'extra'）；
}
)

.base{
宽度：300px；
高度：60px；
背景色：#000000；
过渡：1.5s背景色；
}
.base.extra{
过渡：0s背景色；
背景色：#00ff00；
}

添加“额外”类

删除“额外”类

添加然后删除“额外”类

您可以采用不同的方法。这是一个带有伪元素的想法

.base{
宽度：300px；
高度：60px；
背景色：#000000；
位置：相对位置；
}
.基地：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
z指数：-1；
背景色：#00ff00；
}
.base:hover:：before{
z指数：1；
不透明度：0；
过渡：1.5s不透明度；
}

---

首先，您有两个事件用于

#remove

。另一个应该是

#flash

。第二，它可以工作，但是太快了。设置200毫秒（=0.2秒）的超时（使用JavaScript

setTimeout（）

）使效果可见

$（'#添加'）。在(
“点击”，
职能（e）{
e、 预防默认值（）；
$（'.base'）.addClass（'extra'）；
}
)
$（“#删除”）。在(
“点击”，
职能（e）{
e、 预防默认值（）；
$（'.base'）.removeClass（'extra'）；
}
)
$（'#flash'）。在(
“点击”，
职能（e）{
e、 预防默认值（）；
$（'.base'）.addClass（'extra'）；
setTimeout（函数（）{
$（'.base'）.removeClass（'extra'）；
}, 200);
}
)

.base{
宽度：300px；
高度：60px；
背景色：#000000；
过渡：1.5s背景色；
}
.base.extra{
过渡：0s背景色；
背景色：#00ff00；
}

添加“额外”类

删除“额外”类

添加然后删除“额外”类

你需要一种闪烁效果吗？@Temaniaf如果可能的话，我想要一个瞬间的改变，然后是长时间的褪色。首先，你知道jquey上的事件不正确吗？你已经搬了两次了？@Temaniaafif谢谢！我没有发现。200不是2秒，而是200毫秒。我最后用了10毫秒，但那太完美了，谢谢！