我正在尝试制作一个卡片动画，其中甲板顶部的卡片在悬停时会向上平移。不幸的是，如果我将鼠标水平移动到卡的底部，我的卡似乎会闪烁。我做了一些测试，它似乎与平移有关，因为增加悬停时的平移将导致发生更大的闪烁区域。抱歉，如果我解释得不好，希望查看代码能够显示我的问题是什么（只需在翻译发生后将鼠标悬停在翻译区域上，然后垂直移动鼠标。您也可以增加翻译以查看结果）。
我将寻找有关此问题的任何建议和/或有关我的代码的任何建议。
感谢您的时间和精力！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karte</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="game">
<div id="deck"></div>
<div id="hand"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
#deck {
display: flex;
justify-content: space-around;
position: relative;
}
.card {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
border: 1px solid black;
}
#deck .card:last-child {
transition: transform 0.3s ease;
}
#deck .card:last-child:hover {
transform: translateY(-20px);
}
// grab elements
let game = document.getElementById('game');
let deckEl = document.getElementById('deck');
let hand = document.getElementById('hand');
// global variables
let arr = [{card: 1, text:"Attack"},{card: 2, text:"Attack"},{card: 3, text:"Attack"},{card: 4, text:"Shield"},{card: 5, text:"Shield"},{card: 6, text:"Shield"},{card: 7, text:"Parry"},{card: 8, text:"Parry"},{card: 9, text:"Parry"}];
let cardsInHand = [];
// shuffling the deck with selected deck as argument
function shuffleDeck(array) {
let i = array.length;
while(i--) {
const i2 = Math.floor(Math.random()*i);
[array[i], array[i2]] = [array[i2], array[i]];
}
}
// drawing cards with card number as argument
function drawCards(cardAmount) {
for(cardAmount; cardAmount > 0; cardAmount--) {
cardsInHand.push(arr[arr.length-1]);
arr.pop();
}
}
// generate deck element
function generateDeck() {
let cardOutline = 200;
arr.forEach(card=> {
let cardEl = document.createElement('div');
cardEl.classList.add('card');
cardOutline-=3;
cardEl.style.top = cardOutline + "px";
console.log(cardEl.style.top);
deckEl.appendChild(cardEl);
})
}
generateDeck();
shuffleDeck(arr);
drawCards(3);
我尝试增加修改平移和位置属性，以及顶部和过渡，但是没有太大区别。
这是小提琴 - https://jsfiddle.net/2hsg5bL4/
出现“摇晃”悬停问题是因为当元素向上移动时，它不再悬停，因此它会向下移动，然后再次悬停，依此类推......
此代码片段将悬停向上移动一级，因此悬停会导致顶部卡片向上移动，但悬停仍保留在父卡片上。
// grab elements
let game = document.getElementById('game');
let deckEl = document.getElementById('deck');
let hand = document.getElementById('hand');
// global variables
let arr = [{
card: 1,
text: "Attack"
}, {
card: 2,
text: "Attack"
}, {
card: 3,
text: "Attack"
}, {
card: 4,
text: "Shield"
}, {
card: 5,
text: "Shield"
}, {
card: 6,
text: "Shield"
}, {
card: 7,
text: "Parry"
}, {
card: 8,
text: "Parry"
}, {
card: 9,
text: "Parry"
}];
let cardsInHand = [];
// shuffling the deck with selected deck as argument
function shuffleDeck(array) {
let i = array.length;
while (i--) {
const i2 = Math.floor(Math.random() * i);
[array[i], array[i2]] = [array[i2], array[i]];
}
}
// drawing cards with card number as argument
function drawCards(cardAmount) {
for (cardAmount; cardAmount > 0; cardAmount--) {
cardsInHand.push(arr[arr.length - 1]);
arr.pop();
}
}
// generate deck element
function generateDeck() {
let cardOutline = 200;
arr.forEach(card => {
let cardEl = document.createElement('div');
cardEl.classList.add('card');
cardOutline -= 3;
cardEl.style.top = cardOutline + "px";
//console.log(cardEl.style.top);
deckEl.appendChild(cardEl);
})
}
generateDeck();
shuffleDeck(arr);
drawCards(3);#deck {
display: flex;
justify-content: space-around;
position: relative;
}
.card {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
border: 1px solid black;
}
#deck .card:last-child {
transition: transform 0.3s ease;
}
#deck:hover .card:last-child {
transform: translateY(-20px);
}<link rel="stylesheet" href="style.css">
<div class="container">
<div id="game">
<div id="deck"></div>
<div id="hand"></div>
</div>
</div>