divのCSSトランジション問題間のキーボードナビゲーション

Question

私はマウスレスアプリケーションのヘッダーとして使用されるdiv`s間のCSSトランジションのようなカルーセルで作業しています。遷移は、2つの隣接する要素間の「流れ」の感触を与える。 これまで私がやったことをここに見ることができます：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>