Question

需要像新消息一样 - 通过悬停（参见下面的CSS），它的背景会慢慢消失，但它只能一次，这就是为什么我需要删除这个额外的类，例如“newmessage”给出了这个背景，但如果我通过悬停删除这个类 - 我没有这种缓慢的效果......

.newmessage {
  background-color: rgba(213, 213, 213, 1);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
.newmessage:hover {
  background-color: rgba(213, 213, 213, 0);
}

Answer 1

您可以添加一个在使用JavaScript悬停元素时应用样式规则的类。它只会添加一次，导致元素的样式转换。 Updated version of your fiddle

<强>样本

var newMessages = document.querySelectorAll('.newmessage');


for (var i = 0, l = newMessages.length; i < l; i++) {
    //added the .hovered class on mouseover
    newMessages[i].addEventListener('mouseover', function() {
        this.classList.add('hovered');
    });
}

div {
    background-color: gray;
    height: 50px;
    width: 200px;
    margin-bottom: 5px;
}
.newmessage {
  background-color: rgba(220, 55, 55, 1);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
/* instead of .newmessage:hover, use additional class */
.newmessage.hovered {
  background-color: rgba(220, 55, 55, 0);
}

<div></div>
<div></div>
<div class="newmessage"></div>

Answer 2

你正在寻找的是在trasition结束后执行回调以删除该类。

Is there a callback on completion of a CSS3 animation?

是的，有。回调是一个事件，因此您必须添加一个事件听众抓住它。这是jQuery的一个例子：
$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});
或纯粹的js：
element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);
现场演示：http://jsfiddle.net/W3y7h/

致@Duopixel

在您的情况下，您可能需要使用transitionend代替animationend。

慢慢删除背景颜色

2 个答案: