如何使用图像停止和结束 CSS 与 JavaScript 的过渡？

Question

我在尝试使用 javascript 实现简单的 CSS 转换时遇到这个问题，当按下 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>

Answer 1

这可能是因为您没有定义元素未设置动画时的外观。您可以默认在其上设置 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>

Answer 2

也许这可以帮助

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>

Answer 3

你说你想要一个 "transition" 但你正在使用 animation。如果您想要过渡，请使用过渡。

"Yeah but how do I make it go farther than the end point?" _{[有人会说。]}

使用自定义 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 来切换 class，这将起到同样的作用。

如何使用图像停止和结束 CSS 与 JavaScript 的过渡？

How to stop and end a CSS transition with JavaScript using an image?

html

javascript

css

css-transitions

css-animations