使用本机JavaScript获得CSS过渡过渡的CSS值 [英] Get CSS value mid-transition with native JavaScript

问题描述

此问题曾被问过，但答案使用jQuery，此处.

因此，我将调整问题以专门寻求一个 本地解决方案，以最小化依赖性 .

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

假设我们假设您有一个< div> ，并且< div> 位于 中间过渡 其 opacity 值和 top 值.我如何使用 本地 JavaScript 在过渡期获得这两个属性的值?

Let's say hypothetically, you have a <div> and that <div> is in mid-transition of its opacity value and top value. How would I get the value of both of those properties mid-transition using native JavaScript?

推荐答案

很容易将jQuery脚本从链接的线程移植到其等效的JavaScript中，下面是一个示例.计时器到期后，输出将打印在右侧( output#op 元素)上.

It is very easy to port the jQuery script from the linked thread into its vanilla JavaScript equivalent and below is a sample. The output is printed on the right side (output#op element) once timer expires.

我们正在做的是以下事情:

All that we are doing is the following:

• 在触发过渡的元素上附加两个事件处理程序(有时，触发元素可以与具有动画的元素不同).在另一个线程中，触发过渡的元素和正在过渡的元素是相同的.在这里，我只是为了不同的演示将它放在两个不同的元素上.
• 一个事件处理程序用于 mouseover 事件，这将创建一个计时器(使用 setTimeout )，该计时器获取 opacity 和 top 在计时器到期时要转换的元素的值.
• 另一个事件处理程序用于 mouseleave 事件，以在用户将鼠标悬停在需要 opacity 和 top的特定点之前时清除计时器值.
• 使用

• Attach two event handlers to the element which triggers the transition (sometimes the triggering element can be different from the one that has animation). In the other thread, the element that is triggering the transition and the one that is being transitioned is the same. Here, I have put it on two different elements just for a different demo.
• One event handler is for mouseover event and this creates a timer (using setTimeout) which gets the opacity and top value of the element that is being transitioned upon expiry of timer.
• The other event handler is for mouseleave event to clear the timer when the user has hovered out before the specific point at which we need the opacity and top value to be obtained.
• Getting the opacity and top value of the element that is being transitioned can be obtained by using the window.getComputedStyle method.
• Unlike the demo in the other thread (which uses setInterval), here I have used setTimeout. The difference is that setInterval adds an interval and so the function is executed every x seconds whereas the function passed to setTimeout is executed only once after x seconds. You can use whichever fits your needs.

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>

这篇关于使用本机JavaScript获得CSS过渡过渡的CSS值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！