<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');
});
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.
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.
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): 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>Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras