Question

我设计了一个瞬间改变背景颜色的转换，然后慢慢恢复原始颜色：

＆＃13;

body, html {margin: 0px;padding: 0px;}
div {
    padding: 3px;
    margin: 1px 0 1px 0;
    border: 1px solid black;
    background-color: #3377FF;
    transition: background-color .9s ease-in;
}

div:hover {
    background-color: #33FF11;
    transition-duration: 0s;
}

＆＃13;

<div> Hello</div>
<div> Hello</div>

＆＃13;

这是为表中的行设计的，用于通知用户更改。我想以编程方式触发此效果，但是使用实际的CSS。

Row.prototype.blink = function() {
    ... ?
}

我尝试使用setTimeout在节点中添加和删除类名：

＆＃13;

$("div").on("click", function() {
    $(this).addClass("updated");
    var _this = this;
    setTimeout(function(){$(_this).removeClass("updated");}, 30);
});

＆＃13;

body, html {margin: 0px;padding: 0px;}
div {
    padding: 3px;
    margin: 1px 0 1px 0;
    border: 1px solid black;
    background-color: #3377FF;
    transition: background-color .9s ease-in;
}

div.updated {
    background-color: #33FF11;
    transition-duration: 0s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click div to activate the blink effect:</p>


<div> Hello</div>
<div> Hello</div>

＆＃13;

我也尝试使用transitioned事件，但事件并未触发：

$("div").on("click", function() {
    $(this).one("transitionend", function(){$(this).removeClass("updated");}); // never happens
    $(this).addClass("updated");
});

我不喜欢setTimeout方法，你能想出更好的技巧来触发闪烁效果吗？

Answer 1

transitionend事件未被触发的原因是因为transition-duration设置为0s。换句话说，转换永远不会开始，直到课程被删除（但是因为事件没有被解雇所以课程没有被删除）。

听起来好像动画会更适合这个。只需听取animationend事件，并在动画结束时删除回调中的类：

＆＃13;

$('div').on('click', function() {
  $(this).addClass('updated').one('animationend', function() {
    $(this).removeClass('updated');
  });
});

＆＃13;

body, html {margin: 0px;padding: 0px;}
div {
  padding: 3px;
  margin: 1px 0 1px 0;
  border: 1px solid black;
  background-color: #3377FF;
  cursor: pointer;
}

div.updated {
  animation: updatedFade .9s ease-in forwards;
}

@keyframes updatedFade {
  0% { background-color: #33FF11; }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello</div>
<div>Hello</div>

＆＃13;

作为初始解决方案的解决方案，可以将transition-duration更改为极短的内容，例如1ms，以便初始转换实际开始，从而允许触发transitionend事件：

＆＃13;

$("div").on("click", function() {
  $(this).addClass("updated").one("transitionend", function() {
    $(this).removeClass("updated");
  });
});

＆＃13;

body, html {margin: 0px;padding: 0px;}
div {
  padding: 3px;
  margin: 1px 0 1px 0;
  border: 1px solid black;
  background-color: #3377FF;
  transition: background-color .9s ease-in;
  cursor: pointer;
}
div.updated {
  background-color: #33FF11;
  transition-duration: 1ms;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello</div>
<div>Hello</div>

＆＃13;

可靠的方式来触发单向CSS过渡？

1 个答案: