2

初投稿はこちら。私が抱えている問題を解決できることを願っています:

ユーザーが各文字をクリックして「正しい」フィールドの最初の空きスペースに挿入することで、シャッフルされた文字から単語を推測する必要があるゲームを書いています。

ここで、文字をクリックすると、新しい場所にアニメーションで移動する必要があります。スパンを使用して文字ごとに個別のフィールドを作成しているため、このスパンを CCS3/JavaScript/JQuery を使用してアニメーション化された方法で新しい場所に移動する方法がわかりませんでした。

コードは 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 に答える