div`s CSS轉換問題之間的鍵盤導航

Question

我正在轉換div之間的CSS轉換，它將用作無鼠標應用程序的標頭。過渡給人感覺兩個相鄰元素之間的「流動」。 你可以在這裏看到我迄今爲止所做的工作：https://codepen.io/anon/pen/GOWVGR。元素的焦點使用左側的'a'鍵和右側的's'鍵進行控制。

我幾乎使它的工作使用漸變和背景位置過渡，除了我不知道如何編碼只向一個方向移動時的效果，前一個元素「背景」返回到初始背景位置而不是「跟隨」新選擇的div背景位置。

.left, .right { 
    background-size: 202% 100%; 
    background-image: linear-gradient(to right, transparent 50%,green 50%); 
    -webkit-transition: background-position .3s ease-in-out; 
    -moz-transition: background-position .3s ease-in-out; 
    transition: background-position .3s ease-in-out; 
} 

.left:focus { 
    background-position: 100% 0; 
} 

.right:focus { 
    background-position: -100% 0; 
} 

所需的效果只在一種情況下「工作」，如果按右 - 左（S - A）或左右（一 - S）在我創建了演示。我還添加了以下圖像，以便更容易理解所需的效果。 Desired flow of menu

任何想法將非常感激！謝謝！

Answer 1

我設法創建大多數使用JavaScript的動畫。該代碼將以下「animatedBg」CSS類添加到當前元素和以前的元素，並修改兩個元素的背景位置，從而實現我要求的動畫效果。

我現在需要找到一種方法來保持動畫的流暢性，當按住方向按鈕時。

可以使用左右箭頭測試波紋管片段。

document.getElementById("1").focus(); 
 
var current = 0; 
 
var cls = "right"; 
 

 
var positions = [-100, "x", "x", "x" , "x"]; 
 
updateItems(); 
 
addEventListener("keydown", function (event) { 
 
    if (event.keyCode === 37) { 
 
     if (current === 0) { 
 
      return; 
 
     } 
 
     current--; 
 

 
     var newPositions = ["x", "x", "x", "x" , "x"];; 
 
     if (cls === "left") { 
 
      newPositions[current] = 100; 
 
     } else { 
 
      if (positions[current] !== 0) { 
 
       newPositions[current] = -100; 
 
      } else { 
 
       newPositions[current] = 100; 
 
      } 
 
     } 
 
     newPositions[current + 1] = positions[current + 1] + 100; 
 
     cls = "left"; 
 
     positions = newPositions; 
 

 
    } 
 
    if (event.keyCode === 39) { 
 
     if (current === 4) { 
 
      return; 
 
     } 
 
     current++; 
 
     var newPositions = ["x", "x", "x", "x" , "x"]; 
 
     if (cls === "right") { 
 
      newPositions[current] = -100; 
 
     } else { 
 
      if (positions[current] !== 0) { 
 
       newPositions[current] = 100; 
 
      } else { 
 
       newPositions[current] = -100; 
 
      } 
 
     } 
 
     newPositions[current - 1] = positions[current - 1] - 100; 
 
     cls = "right"; 
 
     positions = newPositions; 
 
    } 
 
    updateItems(); 
 
}); 
 

 
function updateItems() { 
 
    for (var i = 0; i < 5; i++) { 
 
     var element = document.getElementById("" + i); 
 

 
     if(positions[i] === "x") { 
 
      if (element.classList.contains("animatedBg")){ 
 
       element.classList.remove("animatedBg"); 
 
      } 
 
      element.style.backgroundPosition = "0 0"; 
 
     } 
 
     if (positions[i] !== "x") { 
 
      if(!element.classList.contains("animatedBg")){ 
 
       element.classList.add("animatedBg"); 
 
      } 
 
      element.style.backgroundPosition = positions[i] + "% 0"; 
 
     } 
 
    } 
 
}

body { 
 
    width: 100%; 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
} 
 

 
.container { 
 
    height: 140px; 
 
    display: flex; 
 
    background-color: rgba(0,0,0,0.8); 
 
    z-index: 1000; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.item { 
 
    height: 60px; 
 
    padding: 60px 0px 20px; 
 
} 
 

 
.item a { 
 
    color: white; 
 
    font-size: 25px; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
    outline: 0px; 
 
} 
 

 
.animatedBg { 
 
    background-size: 200% 100%; 
 
    background-image: linear-gradient(to right, transparent 51%,green 50%); 
 
    -webkit-transition: background-position .2s ease-in-out; 
 
    -moz-transition: background-position .2s ease-in-out; 
 
    transition: background-position .2s ease-in-out; 
 
}

<div class="container"> 
 
\t <div class="item"> 
 
\t \t <a id="0" class="animatedBg" href="/1" tabindex="-1">1</a> 
 
\t </div> 
 
\t <div class="item"> 
 
\t \t <a id="1" class="" href="/2" tabindex="-1">22</a> 
 
\t </div> 
 
\t <div class="item"> 
 
\t \t <a id="2" class="" href="/3" tabindex="-1">333</a> 
 
\t </div> 
 
    <div class="item"> 
 
\t \t <a id="3" class="" href="/4" tabindex="-1">4444</a> 
 
\t </div> 
 
    <div class="item"> 
 
\t \t <a id="4" class="" href="/3" tabindex="-1">55555</a> 
 
\t </div> 
 
</div>