Поверните div в течение 30 секунд

Привет, мой запрос выглядит следующим образом:

У меня есть блок div, который мне нужно вращать в течение X секунд, я пробовал некоторые библиотеки Jquery, но не смог контролировать время, в которое Это продолжает вращаться и скорость, это важно. С уважением.

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item{
    height: 20rem;
    width: 20rem;
    background-color: darkslategrey;
}
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="item" class="item"></div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
3
задан 24.12.2016, 16:59
0 ответов

Ты можешь делать: sec = 60 / rpm чтобы знать продолжительность службы оборота, зная ésto ты это можешь оживлять путь @keyframes.

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

go.addEventListener('click', () => {
  const sec = 60 / parseInt(rpm.value);
  const millisec = parseInt(timeout.value) * 1000;
  rotate.stop();
  rotate.start(sec, millisec);
});

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

//rotate();
body {
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.form {
  align-items: center;
  display: flex;
  flex: 0 0 70px;
  justify-content: space-around;
}
.form input {
  border: 1px solid #DDD;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.1) inset;
  color: #444;
  font-family: 'open sans';
  font-size: 14px;
  height: 35px;
  padding: 0 .5rem;
}
.form input:focus {
  border-color: rgba(0, 188, 255, .7);
  outline: none;
}
.form button {
  background-color: #1abc9c;
  border: 1px solid transparent;
.  border-radius: 3px;
  color: #fff;
  font-family: 'Open Sans';
  font-size: 14px;
  height: 35px;
  padding: 0 1rem;
}
.form button:active {
  background-color: #16a085;
}
.form button:focus {
  outline: none;
}
.draw {
  align-items: center;
  display: flex;
  flex:  1;
  justify-content: center;
}
.box {
  background-color: #f39c12;
  border-radius: 4px;
  height: 80px;
  width: 80px;
}
.box.animated {
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<section class="form">
  <input type="number" id="rpm" placeholder="Ingresa las RPM" required>
  <input type="number" id="timeout" placeholder="Ingrese tiempo límite (seg)" required>
  <button id="go">Aplicar</button>
</section>
<section class="draw">
  <div class="box"></div>
</section>
7
ответ дан 03.12.2019, 17:59

Здесь у тебя есть пример без utilzar никакой добавочный librertía. Мы используем функции setTimeout и setInterval, кроме того, что применяет к нему CSS посредством JS transform : rotate(angulo deg)

var TIEMPO_1_GRADO = 10 // 10 ms
var TIEMPO_TOTAL   = 5 * 1000 // 5 segundos
var anguloActual  = 0
var divGirar       = document.getElementById('div-girar')
function girar(){
  if(anguloActual == 360) anguloActual = 0
  divGirar.style.transform = 'rotate(' + anguloActual + 'deg)'
  anguloActual++
}

var intervalID = setInterval(girar, TIEMPO_1_GRADO)

setTimeout(function(){
  clearInterval(intervalID)
}, TIEMPO_TOTAL)
html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item{
    height: 20rem;
    width: 20rem;
    background-color: darkslategrey;
}
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="div-girar" class="item"></div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
1
ответ дан 03.12.2019, 17:59

Используя $.animate, ты мог бы делать следующее:

$("#start").click(function() {
  $("#item").animate({
    left: 90
  }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration: 3000
  });
});
.item{
  height: 100px;
  width: 100px;
  background-color: darkslategrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="item" class="item"></div>

<button id="start">Animar!</button>

Объяснение:

В этом случае я использую свойство left (он мог бы использовать любую другую) которая не затронет никакой формы расположение того же самого (так как элемент не posicionado абсолютной формы). Прием основывается в изменении свойства, которое не затрагивало бы действительно элемент, но в каждом шаге (step) оживления крутить gradualmente элемент используя transform','rotate([GRADOS]deg).

0
ответ дан 03.12.2019, 17:59