Javascript 触发 CSS 动画

Question

我不知道怎么写，但请看我的代码: JSFiddle

.pie:nth-of-type(1):hover:AFTER,
.pie:nth-of-type(1):hover:BEFORE  {
    background-color:yellow;    
    opacity: 0.5;
}

它基本上是一个命运之轮游戏，但使用高光而不是旋转。

问题是我如何编写一个 javascript 来触发在给定时间内突出显示切片的事件？我也希望每个切片之间的过渡速度随着时间的推移而减慢。

Answer 1

其实很简单。

首先，您不需要所有馅饼的所有 n-th-of-type。但是您需要一个额外的类，例如“active”，否则您无法通过 JavaScript 突出显示它。

所以，你的 .pie CSS 变成了:

.pie.active:BEFORE,
.pie:hover:AFTER,
.pie:hover:BEFORE {
   background-color: yellow;
   opacity: 0.5;
}

然后，这里是执行您需要的示例代码(在 onload 中):

function highlight(el, delay) {
  setTimeout(function() {
     el.className += ' active'; //light it up
     //un-highlight after delay:
     setTimeout(function() {  el.className = 'pie'; }, 200)
  }, delay)
}


var divs = document.querySelectorAll('.pie');
for (var i = 0; i < divs.length; i++) {
  highlight(divs[i], i*200);
}

这是 fiddle : JSFiddle

可以通过添加过渡使其更加平滑，例如在上面的 CSS 中添加 transition: background-color 0.1s; 并使所有编程延迟为 200ms。

要实现减速，您需要使用延迟公式。 i*200 相当简单，但我不想失去尝试各种数学函数来改变时序的乐趣。此外，您可以更改 transition css，以编程方式在元素本身上更改它优先于 CSS。经过一些努力，您可以轻松地使其相当逼真。