div`s CSS转换问题之间的键盘导航
问题描述:
我正在转换div之间的CSS转换,它将用作无鼠标应用程序的标头。过渡给人感觉两个相邻元素之间的“流动”。 你可以在这里看到我迄今为止所做的工作:https://codepen.io/anon/pen/GOWVGR。元素的焦点使用左侧的'a'键和右侧的's'键进行控制。div`s CSS转换问题之间的键盘导航
我几乎使它的工作使用渐变和背景位置过渡,除了我不知道如何编码只向一个方向移动时的效果,前一个元素“背景”返回到初始背景位置而不是“跟随”新选择的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
任何想法将非常感激!谢谢!
答
我设法创建大多数使用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>
你有结束元素,它没有返回的第一个元素,反之亦然有问题吗?或者当你在一个方向上单击多次时,是否对转换有问题? – 1stthomas
嗨托马斯,当我点击多个时间点击一个方向时,我遇到了“无焦点”元素转换的问题。 – Dragos