javascript - 使用 native JavaScript 在转换中获取 CSS 值

Question

This question was asked before, but the answer uses jQuery, here.

---

So, I am going to tweak the question to specifically ask for a native solution, to minimize dependencies.

假设您有一个 <div>那<div>正处于其 opacity 的中间过渡值(value)和top值(value)。我如何使用原生 JavaScript 在转换过程中获取这两个属性的值？

Answer 1

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

我们正在做的是:

• 将两个事件处理程序附加到触发转换的元素(有时触发元素可能与具有动画的元素不同)。在另一个线程中，触发转换的元素和正在转换的元素是相同的。在这里，我将它放在两个不同的元素上，只是为了进行不同的演示。
• 一个事件处理程序用于 mouseover 事件，这会创建一个计时器(使用 setTimeout)，它获取 opacity 和 top 定时器到期时正在转换的元素的值。
• 另一个事件处理程序用于 mouseleave 事件，当用户在我们需要 opacity 和 top 的特定点之前悬停时清除计时器 要获取的值。
• 获取正在转换的元素的opacity 和top 值可以通过使用window.getComputedStyle method 获得。 .
• 与另一个线程中的演示(使用setInterval)不同，这里我使用了setTimeout。不同之处在于 setInterval 添加了一个时间间隔，因此该函数每 x 秒执行一次，而传递给 setTimeout 的函数仅在 之后执行一次code>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>