如何使用图像使用 JavaScript 停止和结束 CSS 转换？

Question

我有这个问题，我试图用 javascript 实现一个简单的 CSS 转换，当按下start按钮时，它会根据关键帧的持续时间移动和停止，然后当点击end时，它会消失然后再次出现当使用相同的 animation 按下启动时。

有人知道这里可能是什么问题吗？ 并且由于某种原因，当过渡结束时，它会跳到角落。

 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; 在 animation 期间。 这是一个例子：

 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

您说您想要“过渡” ，但正在使用animation 。 如果您想要过渡，请使用过渡。

“是的，但我怎样才能使它 go 比终点更远？” _{[有人可能会说。]}

使用自定义贝塞尔bezier-curve计时 function 纵坐标将超出 [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，效果相同。