updated demo

Question

首先发布在这里。希望你能解决我遇到的问题：

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

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

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;
});

根据您的要求，您可以将信件转到第一个可用的地方。

唯一的提醒任务是从字母数组构造跨度。我认为你已经有一些代码做了类似的工作;这只是一个适应它的问题。

JS / CSS：以动画方式移动范围

1 个答案:

demo

updated demo