Как остановить и завершить переход CSS с помощью JavaScript с помощью изображения? - PullRequest
Новая
       45

Как остановить и завершить переход CSS с помощью JavaScript с помощью изображения?

1 голос
/ 23 октября 2019

У меня есть проблема, когда я пытаюсь реализовать простой переход CSS с помощью javascript, когда при нажатии кнопки start она будет перемещаться и останавливаться в зависимости от продолжительности ключевого кадра, а затем при нажатии end,он исчезнет, ​​а затем снова появится, если нажать кнопку пуска с той же анимацией.

Кто-нибудь знает, в чем здесь проблема? И по какой-то причине, когда переход закончен, он прыгает на угол. 

	function add()
  {
  document.getElementById("myAnimation").classList.add("run-animation");
  }    
function remove()
  {
document.getElementById("myAnimation").classList.remove("run-animation");
  }
body{
 background-color: "#4287f5";
}

#myAnimation
{
	position:relative;
	height: 40px;
	width: 40p;
}
.run-animation 
{
	-webkit-animation: move 6s;
    animation: move 6s;
}

@-webkit-keyframes move
{
	 0%  {left: -200px;}
    25%  {left: 200px;}
    50%  {left: 100px;}
}
@keyframes move
{
	0%  {left: -200px;}
    25%  {left: 200px;}
    50%  {left: 100px;}
}
 <button onclick="add()">Start</button> 
  <button onclick="remove()">End/Remove</button> 
 		<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>

Ответы [ 3 ]

2 голосов
/ 23 октября 2019

Вы сказали, что хотите "переход" , но используете animation. Если вы хотите переход, используйте переход.

«Да, но как мне сделать так, чтобы он шел дальше конечной точки?» [кто-то может сказать.]

Использовать пользовательский bezier-curve функция синхронизации, при которой ордината будет вне диапазона [0, 1]. Это создаст эффект отскока.

Оттуда легко контролировать два состояния вашего элемента, так как вам нужно изменить только одно значение. 

#myAnimation {
  height: 40px;
  width: 40px;
  background: red;
  transform: translate(-40px, 0);
  transition: transform 1.5s cubic-bezier(0, 0, 0.5, 3);
}
:checked ~ #myAnimation {
  transform: translate(100px, 0);
}
body{ margin:0; }
<input type="checkbox" id="check"><label for="check">show elem</label>
<div id="myAnimation"></div>

Примечание. В приведенном выше примере я использовал transform вместо исходного left, поскольку по соображениям производительности это должно быть предпочтительным способом, но это будетработать с любым анимируемым свойством.
Кроме того, я использовал простой флажок в качестве элемента управления, но вы можете удерживать кнопку + js для переключения класса, который будет делать то же самое.

1 голос
/ 23 октября 2019

может быть, это может помочь 

function add()
  {
  document.getElementById("myAnimation").classList.add("run-animation");
  }    
function remove()
  {
document.getElementById("myAnimation").classList.remove("run-animation");
  }
body{
 background-color: "#4287f5";
}

#myAnimation
{
	position:relative;
	height: 40px;
	width: 40p; 
    left: 0;
    opacity: 1;  
}
.run-animation 
{
	-webkit-animation: move 6s;
    animation: move 6s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes move
{
	0%  {left: 0;}
    25%  {left: 200px;opacity: 1;}
    50%  {left: 100px;opacity: 0;}
    80%  {left: 0; opacity: 0;}
    100% {left: 0; opacity: 1;}
}
@keyframes move
{
	0%  {left: 0;}
    25%  {left: 200px;opacity: 1;}
    50%  {left: 100px;opacity: 0;}
    80%  {left: 0; opacity: 0;
    100% {left: 0; opacity: 1;
    
}
<button onclick="add()">Start</button> 
  <button onclick="remove()">End/Remove</button> 
 		<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>
1 голос
/ 23 октября 2019

Вероятно, это потому, что вы не определяете, как должен выглядеть ваш элемент, когда он не анимирован. Вы можете установить display:none; для него по умолчанию и затем display:block; во время анимации. Вот пример: 

function add() {
  document.getElementById("myAnimation").classList.add("run-animation");
}

function remove() {
  document.getElementById("myAnimation").classList.remove("run-animation");
}
body {
  background-color: "#4287f5";
}

#myAnimation {
  position: relative;
  /*
  Hide the element if it is not animated
  */
  display: none;
  height: 40px;
  width: 40p;
}

#myAnimation.run-animation {
  -webkit-animation: move 6s;
  animation: move 6s;
  /*
  Show the element if it is animated
  */
  display: block;
}

@-webkit-keyframes move {
  0% {
    left: -200px;
  }
  25% {
    left: 200px;
  }
  50% {
    left: 100px;
  }
}

@keyframes move {
  0% {
    left: -200px;
  }
  25% {
    left: 200px;
  }
  50% {
    left: 100px;
  }
}
<button onclick="add()">Start</button>
<button onclick="remove()">End/Remove</button>
<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>
...