javascript - JS/CSS : Moving span in an animated way

Question

第一次发帖。希望你能帮助我解决我遇到的问题:

我正在编写一个游戏，用户需要通过单击每个字母将其插入“正确”字段的第一个空白区域来从打乱的字母中猜出一个单词。

现在，当一个字母被点击时，它需要以动画的方式移动到它的新位置。当我使用 span 为每个字母创建一个单独的字段时，我无法弄清楚如何使用 CCS3/JavaScript/JQuery 以动画方式使这个 span 移动到它的新位置。

代码在 JSFiddle 中:http://jsfiddle.net/Pfsqu/

JS:

var randomNumber = Math.floor(Math.random() * words.length);

var word = words[randomNumber];

var chars = word.split('');
chars=_.shuffle(chars);
    for (var i in chars) {
  $('#shuffled').append('<span>'+chars[i]+'</span>');
  $('#correct').append('<span>');
  }             
  $('#shuffled > span').click(function() {
    var letter = $(this);
      letter.replaceWith('<span>'); 
    $('#correct > span:empty').first().append( letter ); /* this part needs to be animated*/

CSS:

     p > span{
 background-color: white;
 margin: 10px;
 -webkit-border-radius: 15px;
 border-radius: 15px;

 width: 2.5em;
 height: 2.5em;
 display: inline-block;

 text-align: center;
 line-height: 2.5em;
 vertical-align: middle;

 animation: 1000ms move ease-in-out;
  -webkit-animation: 1000ms move ease-in-out;
 }

Answer 1

我认为很难按照您想要的方式为元素设置动画。

我要解决的方法是保留相同的 DOM 元素，并更改其属性。

例如，看这个

demo

HTML 是

<div class="solution">
    <span class="q q4">W</span>
    <span class="q q2">O</span>
    <span class="q q3">R</span>
    <span class="q q1">D</span>
</div>

我已经按顺序设置了WORD的字母，然后我给它们设置了q1到q4类中的一个。此类会将跨度设置为屏幕上的特定位置。

这是在这个 CSS 中实现的(也是“已解决”状态的位置

.solution {
  margin-top: 100px;
  -webkit-transition: all 5s;
  position: relative;
}

.solution span {
  border: solid 1px green;
  padding: 10px;
  margin-top: 80px;
  -webkit-transition: all 2s;
  position: absolute;
  background-color: lightgreen;
  font-size: 30px;
}


.solution span:nth-child(1) {
  -webkit-transform: translate(0px, 0px) rotate(0deg);
}
.solution span:nth-child(2) {
  -webkit-transform: translate(80px, 0px) rotate(0deg);
}
.solution span:nth-child(3) {
  -webkit-transform: translate(160px, 0px) rotate(0deg);
}
.solution span:nth-child(4) {
  -webkit-transform: translate(240px, 0px) rotate(0deg);
}
div.solution span.q {
  background-color: yellow !important;
  border: solid 1px red;
  border-radius: 50%;
 
}
.solution .q.q1 {
  -webkit-transform: translate(0px, -100px) rotate(360deg);
}
.solution .q.q2 {
  -webkit-transform: translate(80px, -100px) rotate(360deg);
}
.solution .q.q3 {
  -webkit-transform: translate(160px, -100px)  rotate(360deg);
}
.solution .q.q4 {
  -webkit-transform: translate(240px, -100px)  rotate(360deg);
}

现在jQuery很简单

$('.q').click(function(){
    $(this).removeClass('q');
});

我已经使用了 webkit 前缀，但您可以轻松地将其设置为适用于其他浏览器

编辑后的答案:

将第 n 个子样式更改为:

.answer1 {
  -webkit-transform: translate(0px, 0px) rotate(0deg);
}
.answer2 {
  -webkit-transform: translate(80px, 0px) rotate(0deg);
}
.answer3 {
  -webkit-transform: translate(160px, 0px) rotate(0deg);
}
.answer4 {
  -webkit-transform: translate(240px, 0px) rotate(0deg);
}

和脚本:

var element = 1;

$('.q').click(function(){
    $(this).removeClass('q').addClass("answer" + element);
    element = element + 1;
});

根据您的要求，您已将信件送到第一个可用位置。

唯一需要重新挖掘的任务是从字母数组构造跨度。我认为您已经有一些代码可以完成类似的工作；这只是适应它的问题。

updated demo