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>