Get CSS value mid-transition with native JavaScript

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.

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?

Can you post the test code you are using to do the transition? — spozun, Mar 06 '16 at 04:33
@spozun that shouldn't be needed. Since, I have no idea how to do this with JS, there would only be a CSS sheet and HTML. For example, I would have rules `div { ... }` and `div:hover { ... }` with the css transition property in use — , Mar 06 '16 at 17:46

score 2 · Accepted Answer · answered Mar 06 '16 at 07:17

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:

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>

can currentStyle work in place of getComputedStyle? (http://stackoverflow.com/a/5084041/3186555) — , Mar 06 '16 at 17:43
No, please don't use `currentStyle`. That was a IE specific method and now even IE11 and Edge support `getComputedStyle`. — Harry, Mar 06 '16 at 17:49
From the docs it seems that `getComputedStyle` returns either the start value or the end value, not in-between: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle. Are you sure of your solution? — Vic Seedoubleyew, Aug 25 '20 at 10:14
I have tested on WebKit, and it seems to indeed report the intermediate value. So it seems that the Mozilla docs are wrong, and your answer is at least right for WebKit. Amazing — Vic Seedoubleyew, Aug 25 '20 at 10:23

Arctelix · Answer 2 · 2016-03-06T05:13:23.340

0

The answer referenced in the duplicate question is easily modified to NOT use jquery. There is no black magic happening there.

The real question is why would you want to do this?

If You need control over a transition just impliment the partial transition with javascript, do what you need, then complete the transition.

edited Mar 06 '16 at 05:13

answered Mar 06 '16 at 04:42

Arctelix

4,478
3
27
38

@AnOriginalAlias javascript has no dependancies! My point was there is no need to catch mid transition... – Arctelix Apr 09 '16 at 19:10

Get CSS value mid-transition with native JavaScript

2 Answers2

Linked