Первый пост здесь. Надеюсь, вы поможете мне с моей проблемой:

Я пишу игру, в которой пользователю нужно угадать слово из перемешанных букв, нажимая на каждую букву, чтобы вставить ее в первое пустое место «правильного» поля.

Теперь, когда буква нажата, она должна перемещаться на новое место в анимированном виде. Поскольку я использую диапазон для создания отдельного поля для каждой буквы, я не мог понять, как заставить этот диапазон перемещаться в новое место анимированным образом с помощью 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;
 }
javascript jquery css animation css-transitions
2
kandiman 12 Окт 2013 в 21:19
В вашей скрипке много кода; вам следует сделать сокращенную версию только с кодом, относящимся к заданному вами вопросу. Тогда тебе будет легче помочь
 – 
vals
13 Окт 2013 в 12:22
Простите за это! Я удалил весь несущественный код. Надеюсь, теперь это легче понять.
 – 
kandiman
13 Окт 2013 в 18:47

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, но вы можете легко настроить его для работы в других браузерах.

Отредактированный ответ:

Изменение стилей nth-child на:

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

По вашему запросу вы получили, что письма отправляются в первое доступное место.

Единственная задача напоминания - построить пролеты из массива букв. Я думаю, что у вас уже есть код, который выполняет аналогичную работу; вопрос только в его адаптации.

обновленная демо

1
Community 20 Июн 2020 в 12:12
Спасибо за такой хорошо написанный ответ! Однако я не могу понять, как изменить ваш код так, чтобы: 1) можно было использовать массив из 1000 слов (с буквами, которые должны быть представлены случайным образом), а не только заранее заданное слово; и 2) заставить выбранные (нажатые) буквы перемещаться не в их фактическую позицию в слове (что сделало бы игру бессмысленной), а в первое доступное / пустое место для предположения пользователя. PS Вот пример того, что я пытаюсь сделать во Flash
 – 
kandiman
14 Окт 2013 в 03:39
Спасибо за обновление! В конце концов, я решил сделать более простую анимацию (пульсирующие кнопки), но, думаю, я также понял, как делать вращающееся вращение. Еще раз спасибо за столь подробные ответы!
 – 
kandiman
18 Окт 2013 в 13:26

Похожие вопросы

30 Установить заполнение ячеек и расстояние между ячейками в CSS?
30 Как сделать прозрачный фон для текста или изображения с помощью CSS?
31 Есть ли родительский селектор CSS?
30 Переходы в свойстве отображения CSS
32 Как я могу перейти высоту: 0; по высоте: авто; используя CSS?
16 Можно ли применить CSS к половине символа?
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

4 Как использовать конструкторы в качестве цепочки прототипов?
2 Jest SpyOn — вызывается фактический метод, а не фиктивная реализация
2 Как извлечь случайный элемент из массива — Node.js
1 Недопустимое определение экземпляра. Разрешено только одно поле автоинкремента
1 Асинхронный канал по-прежнему возвращает значение null после запуска наблюдаемого события корыта
1 получение formData из vuejs в php-скрипт
1 React — реквизит компонента не обновляется при обновлении состояния (получатель useState назначается реквизиту)
3 Как не сбрасывать переменную каждый раз при загрузке веб-страницы?
2 JS — подсчитать количество вхождений, найденных в строке
2 Как переместить или скопировать более одного элемента div в другой div?
Все вопросы по теме javascript >

javascript

По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.

Подробнее про javascript...