Как динамически изменить значение ключевого кадра? - PullRequest
Новая
       47

Как динамически изменить значение ключевого кадра?

0 голосов
/ 24 октября 2019

У меня есть следующий код для перемещения изображения 

@-webkit-keyframes mymove {
  from {left: 0px;}
  to {left: 40%;}
}

Теперь мне нужно изменить значение left, т.е. 40%, используя javascript, как мне этого добиться?

Ответы [ 2 ]

0 голосов
/ 24 октября 2019

Вы можете использовать jquery animate function для перехода элемента div. проверьте приведенный ниже пример: 

$(document).ready(function(){
  $("#box").click(function(){
    $("#box").animate({
        left: '40%'
    });
  });
});
#box {
  background: #98bf21;
  height: 100px;
  width: 100px;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="box"></div>

</body>
</html>
0 голосов
/ 24 октября 2019

Вот справочник по использованию transition: 

document.querySelector('.box').addEventListener('click', function() {
   // set the left value dynamically
   this.style.left = '40%';
});
/* cosmetics, ignore these */
.box {
  width: 100px;
  height: 100px;
  background-color: salmon;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

/* relevent styles */
.box {
  position: absolute;
  left: 0;
  transition: left 0.5s;
}
<div class="box">click me</div>
...