香草豆瓣Javascript動畫頁邊空白左邊

我有一個讓我的滑塊工作的問題。這是一個簡單的單擊按鈕來訪問和從部分系統，但我有問題得到它的工作。我已經在這裏做了一個代碼文件：https://codepen.io/ItsBrianAgar/pen/JrbZEz 香草豆瓣Javascript動畫頁邊空白左邊

這是我到目前爲止的js。它需要香草的js

var nextSection = function() { 
    var username = document.querySelector("input[name=\"username\"]").value; 
    var password = document.querySelector("input[name=\"password\"]").value; 
    if (username.length && password.length > 4) { 
     return window.location = "appSection.html"; 
    } else { 
     alert("username and password must be longer than 4 characters"); 
    } 
    } 

    var nextPage = function() { 
    var elem = document.getElementsByClassName("app"); 
    var pos = 0; 
    var posDiff = 0; 
    var currentPos = elem[1].style.marginLeft; 
    var id = setInterval(frame, 5); 
    function frame() { 
     if (posDiff == -320) { 
     clearInterval(id); 
     posDiff = 0; 
     } else { 
     pos--; 
     for (var i = 0; i < elem.length; i++) { 
      elem[i].style.marginLeft = pos + 'px'; 
     } 
     posDiff = currentPos + pos; 
     } 
    } 
    } 

    document.getElementById("cancel").onclick = previousPage = function() { 
    var elem = document.getElementsByClassName("app"); 
    var pos = 0; 
    var id = setInterval(frame, 5); 
    function frame() { 
     for (var i = 0; i < elem.length; i++) { 
     if (pos == 640) { 
      clearInterval(id); 
     } else { 
      elem[i].style.marginLeft = pos + 'px'; 
      pos += 320; 
     } 
     } 
    } 
    }

來源

2017-09-24 Brian Agar

我忘了提，我只是一直在註冊按鈕到目前爲止 –

您可以請定義「*我有一個問題讓我的滑塊工作*」。對我而言，嘗試註冊的確確實實現了頁面轉換的動畫。 –

爲什麼不使用css轉換或動畫？ – jfeferman

您可以使用Element.animate()動畫一個DOM元素

const [div, animationState, props] = [ 
 
    document.querySelector("div") 
 
, ["click to animate", "click to reverse animation"] 
 
, ["0px", "320px"] // from, to 
 
]; 
 

 
div.textContent = animationState[0]; 
 

 
div.onclick =() => { 
 
    div.animate({ 
 
     marginLeft: props 
 
    }, { 
 
     duration: 1000, 
 
     easing: "linear", 
 
     iterations: 1, 
 
     fill: "both" 
 
    }) 
 
    .onfinish = function() {  
 
     props.reverse(); 
 
     div.textContent = animationState.reverse()[0];   
 
    } 
 
}

<div></div>

來源

2017-09-24 22:46:22 guest271314

香草豆瓣Javascript動畫頁邊空白左邊

回答

相關問題