user3771012 user3771012 - 14 days ago 5
jQuery Question

How can i get in jQuery the current state of an infinite animation in CSS

<section class="viewport" id="content">
<div class="cube rotate1 " id="test">
<div class="front" id="ajax-container"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</section>
<button type="button" class="test">Click Me!</button>


jQuery:

$(".test").on('click',function(e){
$(".cube").addClass('paused');
});


Demo

How can i get the current position of the cube when i pause the animation?

I need its current position(rotatex,rotatey) in jQuery to do stuff from that position.

UPDATED:

i have tried this script :

function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return (angle < 0) ? angle + 360 : angle;


}

but i get numbers under 180 degrees. It is not working properly.

Answer

You can use an animationstart listener on the element, and from there calculate the rotations based on the time expired since the last animation start. You know animation lasts 3 seconds, so the calculation is trivial.

Using animation events

Here's your fiddle with the calculation: https://jsfiddle.net/yzrq367s/2/

And another with live state output: https://jsfiddle.net/yzrq367s/3/

Using animationiteration (wait for one cycle for it to start because CSS runs before JS in the fiddle): https://jsfiddle.net/yzrq367s/6/


$(".test").on('click',function(e){
        $(".cube").addClass('paused');
        clearInterval(int);
        $('p').text(((new Date().getTime() - animStart.getTime()) % 3000 / 3000 * 360).toFixed(2) + " degrees");
        $('.test').hide();
  });
  
  $(".cube").get(0).addEventListener('animationstart', function(){
  	animStart = new Date();
    if(!int)
    	int = setInterval(function(){
  			$('p').text(((new Date().getTime() - animStart.getTime()) % 3000 / 3000 * 360).toFixed(2));
  		}, 10)
  })
  
var animStart;
var int;
$(".cube").addClass('running');
.menu {position: absolute; right: 20px; top: 20px; text-align: right}
.viewport {
  width: 400px;
  height: 400px;
  margin-top: 50px;
  position: relative;
  perspective-origin: 50% 50%;
  perspective: 1000px;
}

.cube {
  margin: auto;
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
}

.cube div {
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-color: #000;
  border: solid 1px #eee;
  color: #fff;
  font: 10px arial;
  transition: transform 0.2s ease-in;
}

.front {
  transform: translateZ(100px);
  overflow: hidden;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
}

@keyframes rotate1 {
  to {
    transform: rotateX(90deg) rotateY(90deg);
  }
}

@keyframes rotate2 {
  to {
    transform: rotateX(180deg) rotateY(180deg);
  }
}

@keyframes rotate3 {
  to {
    transform: rotateX(270deg) rotateY(270deg);
  }
}

@keyframes rotate4 {
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube.running {
  animation: rotate1 3s, rotate2 3s, rotate3 3s, rotate4 3s infinite linear;
  animation-fill-mode: forwards;
}

.paused {
  animation-play-state: paused !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="viewport" id="content">
  <div class="cube" id="test">

    <div class="front" id="ajax-container"></div>
    <div class="back"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>

  </div>


</section>
<div class="menu">
  <button type="button" class="test">Click Me!</button>
  <p>Waiting for the animation to start</p>
</div>