将图片从一个< div>到另一个< div>使用CSS作为Javascript函数的一部分 [英] Moving an Image from one <div> to another <div> with CSS as part of a Javascript function
问题描述
我是一个初学者，我正在开发一个简单的纸牌游戏作为我的第一个真正的项目。我需要帮助将img从一个移动到另一个作为检查分数的函数的一部分（如果分数超过'99'，它然后运行 checkscore（）; 函数。作为这个函数的一部分，它将图像从'trinkets-held'div，到'trinkets-lost'div。我的问题是我是CSS动画的新手，我试图动画的动画。
I'm a novice coder and I'm developing a simple card game as my first real project. I need help moving an img from one to another as part of a function that checks the score (if the score is over '99' it then runs the checkscore(); function. As part of this function, it appends the image from the 'trinkets-held' div, to the 'trinkets-lost' div. My problem is that I'm new to CSS animations and I'm trying to animate the move. Is my setup conducive to this or am I trying to tackle this all wrong?
这里是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函数：
And here is the javascript functions needed to move the image:
function checkscore() {
if (confirm("GAME OVER") === true) {
document.getElementById('trinkets-lost').appendChild(document.getElementById('trinket1'));
roundreset();
}
else {
reset();
}
}
如何动画动画？
推荐答案
好的，这里是另一种方法。它有点复杂，但它使用CSS3过渡，克隆和占位符的中心位置和正确的动画。此外，原始元素在DOM中移动，因此您的DOM实际上代表游戏的数据模型，并且饰品不仅以光学方式移动。
Okay, here is another approach. It is a bit more complex, but it uses CSS3 transitions, a clone and a placeholder for centered positions and correct animations. Also, the original element is moved in the DOM, so your DOM actually represents the game's data model and the trinket is not only moved in an optical way.
您可以测试在 这个小提琴 。
You can test it in 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);
});
}
这篇关于将图片从一个< div>到另一个< div>使用CSS作为Javascript函数的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
