javascript - div 的 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) 或左-右 (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">
	<div class="item">
		<a id="0" class="animatedBg" href="/1" tabindex="-1">1</a>
	</div>
	<div class="item">
		<a id="1" class="" href="/2" tabindex="-1">22</a>
	</div>
	<div class="item">
		<a id="2" class="" href="/3" tabindex="-1">333</a>
	</div>
  <div class="item">
		<a id="3" class="" href="/4" tabindex="-1">4444</a>
	</div>
  <div class="item">
		<a id="4" class="" href="/3" tabindex="-1">55555</a>
	</div>
</div>