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

【问题标题】：How to stop and end a CSS transition with JavaScript using an image?如何使用图像停止和结束使用 JavaScript 的 CSS 过渡？
【发布时间】：2019-10-23 16:20:35
【问题描述】：

我有这个问题，我试图用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>

【问题讨论】：

你没有在关键帧中提到动画完成即100%，你可以添加100% { left: 0; }
当我们使用关键帧时，我们应该为给定的要求提供完整的断点。你检查这个链接：codepen.io/t3veni/pen/YzzZZRO

标签： javascript html css css-transitions css-animations

【解决方案1】：

你说你想要一个“transition”，但你使用的是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 来切换类，效果相同。

【讨论】：

你好。您的代码效果很好。您可能知道如何将 javascript 应用于它，以便 transform: translate 将被触发并以 javascript 结束？
使用你自己代码中的类，而不是:checked ~ #myAnimation。
你能检查这个小提琴以确定错误吗？ jsfiddle.net/developingm/1p4tfv56/11
一些事情，jsfiddle 默认情况下会将 js 代码包装在 onload 事件回调中，您通过 html 属性附加事件并且需要在全局范围内声明回调函数，这样做，您需要将 jsfiddle 设置为“nowrap in ...”。然后，#myAnimation 比 .run-animation 更重要，你需要让你的选择器更重要（#myAnimation.run-animation 就可以了）。最后，如果您希望在页面加载时发生转换，则需要在文档解析后切换类：jsfiddle.net/t81hd3qj/1
我必须感谢您帮助我解决这个问题。你的帮助真的很有帮助。

【解决方案2】：

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

【讨论】：

您好，我在 jsfiddle 中尝试了您的代码。您能否说出小提琴的问题是什么，因为它目前不起作用：jsfiddle.net/developingm/1p4tfv56/6
另外，由于某种原因，它不会停留在 100px，而是在一切结束时跳转到 0。
在这里 (jsfiddle.net/dynhcx0o) 我用你的小提琴来修复它，并在我所做的事情上添加了一些 cmets。希望这会有所帮助。

【解决方案3】：

也许这会有所帮助

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>

【讨论】：