触发单向CSS转换的可靠方式

Reliable way to trigger one-way CSS transition?

本文关键字：方式 转换 CSS      更新时间：2023-09-26

我设计了一个过渡，可以立即改变背景颜色，然后慢慢恢复到原始颜色：

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;
}
<div> Hello</div>
<div> Hello</div>

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

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

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

$("div").on("click", function() {
    $(this).addClass("updated");
    var _this = this;
    setTimeout(function(){$(_this).removeClass("updated");}, 30);
});
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;
}
<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>

我还尝试使用transitioned事件，但该事件从未触发：

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

我不喜欢setTimeout方法，难道你想不出更好的技巧来触发眨眼效果吗？

未触发transitionend事件的原因是transition-duration设置为0s。换句话说，在移除类之前，转换永远不会开始（但由于事件未被激发，所以不会移除类）。

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

$('div').on('click', function() {
  $(this).addClass('updated').one('animationend', function() {
    $(this).removeClass('updated');
  });
});
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; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello</div>
<div>Hello</div>

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

$("div").on("click", function() {
  $(this).addClass("updated").one("transitionend", function() {
    $(this).removeClass("updated");
  });
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello</div>
<div>Hello</div>

相关文章：