Как сделать плавное движение слова?

Question

как сделать что бы при нажатии на слово,оно плавно перемещалось над полоской. И так все остальные слова. Потом я нажимаю на "проверить" и если не правильно,то выдается ошибка,если правильно то выдается сообщение "верно"

<button type="button" id="r">Проверить</button>

<div>Выберите слова,к которым при множественном числе добавляются -es</div>

<?xml version="1.0" standalone="no"?>
<svg width="600" height="130" version="1.1" xmlns="http://www.w3.org/2000/svg">


  <line x1="100" x2="600" y1="100" y2="100" stroke="orange" fill="transparent" stroke-width="5"/>
  
</svg>

<div>an actress(актриса)</div>
<div>a dress(платье ) </div>
<div>wolf(волк) </div>
<div>a tomato (томат)</div>
<div>wife(жена) </div>



<?xml version="1.0" standalone="no"?>
<svg width="600" height="130" version="1.1" xmlns="http://www.w3.org/2000/svg">


  

<div id="rect"></div>

Answer 1

Если я правильно понял, что Вы имели ввиду, то можно в обработке клика просто добавить к элементу класс, в котором будет указаны margin-left: 1em (допустим) и transition: .2s. Это как пример:

const block = document.getElementById('block');

block.addEventListener('click', () => {
  block.classList.add('slide');
});

.slide {
  margin-left: 1em;
  transition: .2s;
}

<div id="block">Нажми на меня</div>

БЛОГ НА HUSL

Как сделать плавное движение слова?

Ответы (1 шт):