2

第一次在这里发帖。希望你能帮我解决我遇到的问题：

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

现在，当一个字母被点击时，它需要以动画的方式移动到它的新位置。当我使用 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;
 }
4

1 回答 1

1

我认为按照您想要的方式为项目设置动画是非常困难的。

我解决它的方法是保持相同的 DOM 元素，并改变它的属性。

例如，看到这个

演示

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

根据您的要求，您可以将信件放在第一个可用的位置。

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

更新的演示

于 2013-10-13T17:07:06.797 回答