Question

我正在使用像div之间的CSS过渡这样的旋转木马，它将被用作无鼠标应用程序的标题。过渡给人一种“流动”的感觉。两个相邻元素之间。你可以在这里看到我迄今为止所完成的工作：https://codepen.io/anon/pen/GOWVGR。使用＆＃39; a＆＃39;来控制元素的焦点。左边的钥匙和's＆＃39;正确的关键。

我差点使用渐变和背景位置转换工作，除了我无法弄清楚如何仅向一个方向移动时编码效果，前一个元素＆＃34;背景＆＃的情况34;返回到初始背景位置而不是＆＃34;跟随＆＃34;新选择的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;
}

期望的效果是＆＃34;工作＆＃34;只有在一种情况下，如果你在我创建的演示中按左 - 右（s - a）或左 - 右（a - s）。我还添加了以下图像，以便更容易理解所需的效果。 Desired flow of menu

任何想法都将非常感谢！谢谢！

Answer 1

我设法主要使用javascript创建动画。该代码添加了以下＆＃34; animatedBg＆＃34; CSS类到当前和以前的元素，并修改两个元素的背景位置，实现这种方式我要求的动画。

我现在需要找到一种方法，在按住方向按钮时保持动画的流畅性。

可以使用左右箭头测试波纹管片段。

＆＃13;

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";
        }
    }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

div`s CSS过渡问题之间的键盘导航

1 个答案: