我是一名编码新手，正在开发一款简单的纸牌游戏作为我的第一个实际元素。我需要帮助将 img 从一个移动到另一个，作为检查分数的函数的一部分(如果分数超过“99”，它会运行 checkscore(); 函数。作为此函数的一部分，它将图像从“trinkets-held”div 附加到“trinkets-lost”div。我的问题是我是 CSS 动画的新手，我正在尝试为移动设置动画。我的设置是否有助于此还是我试图解决这一切错误？
这是 html:
<body>
<div id="trinkets-held-text">
Trinkets Held
</div>
<div id="trinkets-held" style="text-align: center">
<img alt="trinket1" id="trinket1" src="graphics/trinket1.png" style="width:100px;height:100px">
<img alt="trinket2" id="trinket2" src="graphics/trinket2.png" style="width:100px;height:100px">
<img alt="trinket3" id="trinket3" src="graphics/trinket3.png" style="width:100px;height:100px">
</div>
<br>
<div id="trinkets-lost-text">
Trinkets Lost
</div>
<div id="trinkets-lost" style="text-align: center"></div>
</body>
下面是移动图像所需的 javascript 函数:
function checkscore() {
if (confirm("GAME OVER") === true) {
document.getElementById('trinkets-lost').appendChild(document.getElementById('trinket1'));
roundreset();
}
else {
reset();
}
}
我将如何制作该 Action 的动画？
最佳答案
好的，这是另一种方法。它有点复杂，但它使用 CSS3 过渡、克隆和占位符来实现居中位置和正确的动画。此外，原始元素在 DOM 中移动，因此您的 DOM 实际上代表了游戏的数据模型，而饰品不仅以光学方式移动。
可以在 this fiddle中测试.
HTML:
<div id="trinkets-held-text">
Trinkets Held
</div>
<div id="trinkets-held" style="text-align: center">
<img alt="trinket1" id="trinket1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Disc_Plain_red.svg/100px-Disc_Plain_red.svg.png" class="trinket">
<img alt="trinket2" id="trinket2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Disc_Plain_green_dark.svg/100px-Disc_Plain_green_dark.svg.png" class="trinket">
<img alt="trinket3" id="trinket3" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Disc_Plain_blue.svg/100px-Disc_Plain_blue.svg.png" class="trinket">
</div>
<br>
<div id="trinkets-lost-text">
Trinkets Lost
</div>
<div id="trinkets-lost" style="text-align: center"></div>
<input type="button" onclick="checkscore(1)" value="Check Score (red)">
<input type="button" onclick="checkscore(2)" value="Check Score (green)">
<input type="button" onclick="checkscore(3)" value="Check Score (blue)">
CSS:
.trinket, .trinket-placeholder {
width: 100px;
height: 100px;
/* the animation */
transition: all 1.5s;
/* we need relative positions for the position transitions */
position: relative;
}
.trinket-placeholder {
display: inline-block;
/* the negative margin adjusts the original trinket */
margin-left: -100px;
/* only keep transitions for the width, so we can remove the margin without transitions */
transition: width 1.5s;
}
.trinket {
top: 0;
left: 0;
}
#trinkets-lost {
/* add a height to the wrapper, so there is no flickering after moving the element */
min-height: 110px
}
JS:
function checkscore(i) {
if (confirm("GAME OVER") === true) {
moveTrinket(i);
} else {
reset();
}
}
function moveTrinket(i) {
var trinketsLost = document.getElementById('trinkets-lost');
var trinketsHeld = document.getElementById('trinkets-held');
var trinketOrig = document.getElementById('trinket' + i);
// clone the element (wee need the clone for positioning)
var trinketClone = trinketOrig.cloneNode();
trinketClone.style.visibility = 'hidden';
trinketsLost.appendChild(trinketClone);
// calculate the new position, relative to the current position
var trinketOrigTop = trinketOrig.getBoundingClientRect().top;
var trinketOrigLeft = trinketOrig.getBoundingClientRect().left;
var trinketCloneTop = trinketClone.getBoundingClientRect().top;
var trinketCloneLeft = trinketClone.getBoundingClientRect().left;
var newPositionTop = (trinketCloneTop - trinketOrigTop);
var newPositionLeft = (trinketCloneLeft - trinketOrigLeft);
// remove the clone (we do not need it anymore)
trinketClone.parentNode.removeChild(trinketClone);
// create a placeholder to prevent other elements from changing their position
var placeholder = document.createElement('div');
placeholder.classList.add('trinket-placeholder');
trinketOrig.parentNode.insertBefore(placeholder, trinketOrig.nextSibling);
// position the original at the clone's position (this triggers the transition)
trinketOrig.style.zIndex = 1000;
trinketOrig.style.top = newPositionTop + 'px';
trinketOrig.style.left = newPositionLeft + 'px';
// this will be triggered after the transition finished
trinketOrig.addEventListener('transitionend', function() {
// reset the positioning
this.style.position = 'scroll';
this.style.top = 0;
this.style.left = 0;
// shrink the placeholder to re-center the held trinkets
placeholder.style.width = 0;
placeholder.style.marginLeft = 0;
// when the placeholder transition has finished, remove the placeholder
placeholder.addEventListener('transitionend', function (){
this.parentnode.removeChild(this);
// removing the placeholder is the last action,
// after that you can do any following actions
roundreset();
});
// move the trinket element in the DOM (from held to lost)
trinketsLost.appendChild(this);
});
}
关于javascript - 使用 CSS 作为 Javascript 函数的一部分将图像从一个 <div> 移动到另一个 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25895855/