如何使用圖像使用 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，效果相同。