如何在當前位置開始另一個影片？-有解無憂

所以這是我的盒子

<div class="mybox"></div>

我有一個影片

.mybox{
  animation:right 5s;
  animation-fill-mode:forwards;
  padding:50px;
  width:0px;
  height:0px;
  display:block;
  background-color:black;
}
@keyframes 

right{from{left:0px;}to{left:300px 
;}}
@keyframes 
left{from{right:0px;}to{right:300p 
 x;}}

我有兩個按鈕

<button onclick="leftFunction">left</button>
<button onclick="rightFunction">right</button>

然后，如果我單擊左，它會在向左移動時向左移動，然后我單擊右，我想停止左側影片并向右移動，但右側影片必須從當前位置開始，而不是傳送并向右移動。

請幫助:(我是堆疊溢位的新手

這是js

function leftFunction() {
             
document.getElementById("myDIV").style.animation 
= "left 4s";
}
function rightFunction() {
              
 document.getElementById("myDIV").style. 
animation = "right 4s";
}

uj5u.com熱心網友回復：

我發現您發布的代碼存在許多問題，但您在正確的軌道上。

您的 DOM 方法正在查找 IDmyDIV不存在的元素，我將其更改為，document.querySelector(".mybox")因為這是您的 div 的類名。
您沒有在處理程式上呼叫函式呼叫onclick，不確定您是否會發生任何事情......添加()呼叫它 onclick。
您的代碼布局沒有遵循正常的間距約定，但是很難將代碼寫入堆疊溢位，所以我理解。我做了我認為必要的改變。
您正在為您的 div 設定位置值，但沒有position宣告任何屬性。Positionstatic默認情況下不回應leftor right。我使用relative它會將 div 保留在檔案流中。
更改left一個影片和right另一個影片將分別保持之前的左側或右側值，并可能導致您的 div 意外縮小或增長。我將其更改為僅影響left屬性。

現在的解決方案

更改您的關鍵幀以僅更新left屬性。從 onclick 呼叫函式并傳入event物件。這將允許您只有一個函式來處理影片的變化，并且可以使用事件目標innerHTML來設定所需的影片名稱。

利用 CSS 自定義屬性，以便在 javascript 中改變值，并使您的from屬性從自定義屬性開始。在這種情況下--cur-pos。

呼叫該函式時，獲取 div 元素，并使用找到它的計算left值document.getComputedStyle()，然后使用該值更新自定義屬性--cur-pos。這樣影片總是從 div 當前所在的位置開始。

瞧！你應該很高興。您可能必須調整起始值--cur-pos以使 div 從您想要的位置開始，并更新to值以在您想要的位置結束，只需確保選擇更新水平位置left或right更新水平位置，而不是兩者。

function changeAnimation(e) {
  const box = document.querySelector(".mybox")
  const pos = window.getComputedStyle(box).left
  box.style.setProperty("--cur-pos", pos)
  box.style.animationName = e.target.innerHTML
}

.mybox {
  --cur-pos: 150px;
  width: 100px;
  height: 100px;
  background-color: black;
  position: relative;
  animation: right 4s forwards;
}

@keyframes right {
  from { left: var(--cur-pos); }
  to { left: 300px; }
}

@keyframes left {
  from { left: var(--cur-pos); }
  to { left: 0px; }
}

<div class="mybox"></div>
<button onclick="changeAnimation(event)">left</button>
<button onclick="changeAnimation(event)">right</button>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/440959.html

標籤：javascript html css 动画

上一篇：回呼也適用于第一個影片結束元素

下一篇：為什么setInterval()在Firefox中的行為不同