Question

之前曾问过这个问题，但答案使用的是jQuery，here。

所以，我将调整问题，专门要求原生 解决方案，以最小化依赖关系 的

假设您假设<div> <div>位于其{{1>} 过渡期中 值和opacity值。如何使用原生 JavaScript 获得转换中期的这两个属性的值？

Answer 1

将jQuery脚本从链接线程移植到其等价的vanilla中非常容易，下面是一个示例。计时器到期后，输出将打印在右侧（output#op元素）。

我们正在做的所有事情如下：

将两个事件处理程序附加到触发转换的元素（有时触发元素可以与具有动画的元素不同）。在另一个线程中，触发转换的元素和正在转换的元素是相同的。在这里，我将它放在两个不同的元素上，仅用于不同的演示。
一个事件处理程序用于mouseover事件，这会创建一个计时器（使用setTimeout），该计时器获取正在转换的元素的opacity和top值计时器到期。
另一个事件处理程序用于mouseleave事件，以便在用户在我们需要获取opacity和top值的特定点之前悬停时清除计时器。
使用window.getComputedStyle method可以获取正在转换的元素的opacity和top值。
与其他帖子（使用setInterval）中的演示不同，这里我使用了setTimeout。不同之处在于setInterval添加了一个间隔，因此函数每x秒执行一次，而传递给setTimeout的函数仅在x秒后执行一次。您可以根据自己的需要使用它们。

var wrap = document.querySelector('.wrapper'),
  el = document.querySelector('.with-transition'),
  op = document.querySelector('#op');
var tmr;

wrap.addEventListener('mouseenter', function() {
  tmr = setTimeout(function() {
    op.innerHTML = 'Opacity: ' + window.getComputedStyle(el).opacity +
      ', Top: ' + window.getComputedStyle(el).top;
  }, 2500);
});
wrap.addEventListener('mouseleave', function() {
  clearTimeout(tmr);
});

.wrapper {
  position: relative;
  height: 400px;
  width: 400px;
  background: yellowgreen;
}
.with-transition {
  position: absolute;
  top: 0px;
  left: 100px;
  width: 200px;
  height: 100px;
  background: yellow;
  opacity: 0;
  transition: all 5s linear;
}
.wrapper:hover .with-transition {
  top: 300px;
  opacity: 1;
}
output {
  position: absolute;
  top: 50px;
  right: 50px;
}

<div class='wrapper'>
  <div class='with-transition'></div>
</div>
<output id='op'></output>

Answer 2

重复问题中引用的答案很容易修改为不使用jquery。那里没有黑魔法。

真正的问题是你为什么要这样做？

如果您需要控制转换，只需使用javascript来实现部分转换，请执行您需要的操作，然后完成转换。

使用本机JavaScript获取转换中的CSS值

2 个答案: