Capturar el estado de una animacion Css

Saludos, tengo el siguiente div girando con @Keyframes. Lo que necesito es que al momento de hacer click en el mismo div, capturar el angulo actual en que este se encuentra.

const go = document.querySelector('#box');
const box = document.querySelector('.box');
const rpm = 30;
const timeout = 30;
let tid = null; // timeout id

const sec = 60 / parseInt(rpm);
const millisec = parseInt(timeout) * 1000;

$( document ).ready(function() {
    rotate.stop();
    rotate.start(sec, millisec);
});

go.addEventListener('click', () => {
    //CAPUTA ANGULO ACTUAL DEL DIV BOX
});


const rotate = {
    stop() {
        if (tid) {
            window.clearTimeout(tid);
        }
        box.removeAttribute('style');
        box.classList.remove('animated');
    },
    start (sec, millisec) {
        box.style.animationDuration = `${sec}s`;
        box.classList.add('animated');
        tid = window.setTimeout(() => {
                box.classList.remove('animated');
    }, millisec);
    }
}
html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draw{
    height: 15rem;
    width: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    width: 100%;
    height: 100%;
    background-color: aqua;
}
.box.animated {
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section class="draw">
    <div class="box" id="box"></div>
</section>
<script src="jquery.min.js"></script>
<script src="script3.js"></script>
</body>
</html>
1
задан 26.12.2016, 14:33
0 ответов

Ты можешь использовать эту функцию, извлеченный из ответа на английском Stack over flow. Где он посылает его ему из-за параметра, она пойдите элемента, что ты хочешь получить ротацию. Получается стоимость css, получаются две точки и вычисляется угол. Функция atan2 он получает угол между двумя координатами или векторами в radianes. После получая этот результат, parsea в градусы 180 / Math.PI

В этом соединении ты можешь видеть Угол между двумя точками угла

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;
}

const go = document.querySelector('#box');
const box = document.querySelector('.box');
const rpm = 30;
const timeout = 30;
let tid = null; // timeout id

const sec = 60 / parseInt(rpm);
const millisec = parseInt(timeout) * 1000;

$( document ).ready(function() {
    rotate.stop();
    rotate.start(sec, millisec);
});

go.addEventListener('click', () => {
   var angulo = getRotationDegrees($('#box'));
   alert(angulo);
});

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;
}


const rotate = {
    stop() {
        if (tid) {
            window.clearTimeout(tid);
        }
        box.removeAttribute('style');
        box.classList.remove('animated');
    },
    start (sec, millisec) {
        box.style.animationDuration = `${sec}s`;
        box.classList.add('animated');
        tid = window.setTimeout(() => {
                box.classList.remove('animated');
    }, millisec);
    }
}
html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draw{
    height: 15rem;
    width: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    width: 100%;
    height: 100%;
    background-color: aqua;
}
.box.animated {
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section class="draw">
    <div class="box" id="box"></div>
</section>
<script src="jquery.min.js"></script>
<script src="script3.js"></script>
</body>
</html>
2
ответ дан 03.12.2019, 17:59
  • 1
    Без jQuery: Возможно заменять $('#box').css('transform') и использовать window.getComputedStyle(document.getElementById('box')).getPropertyValue('transform') (IE9 +) –  26.12.2016, 14:55