Добиться плавного перехода в div, имеющий абсолютную позицию

Question

У меня есть всплывающее окно в контейнере карты. Положение всплывающего окна изменяется в зависимости от положения маркера, к которому оно прикреплено. Применяется CSS:

#popup{
 opacity:1,
 bottom:100px,
 left:200px
}

Здесь значение снизу и слева динамически меняется с помощью javascript и быстро меняется. Когда позиция меняется, всплывающее окно сразу переходит к месту и не скользит. Что нужно сделать, чтобы он скользил и не переходил прямо в позицию.

Answer 1

Вам просто нужно добавить свойство transition css.

#popup{
  opacity:1,
  bottom:100px,
  left:200px
  transition: all ease-in-out 0.5s;
}

Answer 2

Вам нужно добавить transition:all .2s linear; для плавного перехода ИЛИ отдельно transition:left .2s linear, bottom .2s linear;

$('#popup').click(function(){
	$(this).toggleClass('added');
});

#popup{
 opacity:1;
 bottom:100px;
 left:200px;
 transition:all .2s linear;
 width:200px;
 height:200px;
 background:red;
 position:absolute;
}

#popup.added{
 opacity:1;
 bottom:10px;
 left:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="popup">
  Hi
</div>