How to have smooth movements when inserting a new element?

Question

I insert a new div element in the middle of the others, and I want the others to move to their new position in a fluid way and not suddenly as is currently the case.

Here is my code in action: https://codepen.io/BigEiffelTower/pen/vYBgqZq

<div id="top">
  Top of the page
</div>

<div id="middle">

</div>

<div id="bottom">
  <form> 
    <input type="button" value="Add an element">
  </form>
  End of the page
</div>

#top, #middle, #bottom {
  font-size: 1.5em;
  border: 2px solid black;
  margin: 0.3em
  transition: all 2s ease;
}

var btn = document.querySelector('input');
btn.addEventListener('click', updateBtn);

function updateBtn() {
    $el = $("<div>", {
            id: 'middle-item',
            text: "New element"
        });
    $("#middle").append($el);
}

How to make the #three element move smoothly when you click on the button?

Depends on the animation that you would want. You could for example animate the height of the new element, or animate the position/margin of the bottom element. — vicbyte, Aug 24 '19 at 07:02

score 5 · Accepted Answer · edited Aug 24 '19 at 08:03

You can do it with animate() function.

var btn = document.querySelector("input");
btn.addEventListener("click", updateBtn);

function updateBtn() {
  $el = $("<div>", {
    id: "middle-item",
    text: "New element",
    style: "display: none"
  });
  $("#middle")
    .append($el)
    .animate({ height: "+=" + $el.height() }, 200, function() {
      $el.fadeIn(100);
    });
}

/* You don't need to define a `css transition` anymore. */
#top, #middle, #bottom {
  font-size: 1.5em;
  border: 2px solid black;
  margin: 0.3em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="top">
  Top of the page
</div>

<div id="middle">

</div>

<div id="bottom">
  <form>
    <input type="button" value="Add an element">
  </form>
  End of the page
</div>

score 1 · Answer 2 · answered Aug 24 '19 at 07:23

Hope this code will help you:

HTML:

<div id="top">
  Top of the page
</div>

<div id="middle">
  <ul>
  </ul>

</div>

<div id="bottom">
  <form> 
    <input type="button" value="Add an element">
  </form>
  End of the page
</div>

CSS:

button {
  display: block;
  margin: 0 auto;
  cursor: pointer;
  border: none;
  width: 150px;
  height: 40px;
  border-radius: 5px;
}

ul {
  list-style: none;
  padding: 10px;
  margin: 0;
  text-align: center;
}

li {
  width: 100px;
  height: 50px;
  cursor: pointer;
  margin: 0 3px;
  transform-orgin: center;
  transition: all 0.2s ease-in-out;
  animation-name: popin;
    animation-duration: 0.3s;
    animation-timing-function: easeout;
}

li.transReset {
  transition: intial;
}

li:hover{
  transform: scale(1.2);
}


@keyframes popin {
  0% {
    transform: scale(0.2);
  }
  75% {
    transform: scale(1.2);
    animation-timing-function: easeout;
  }
  100% {
    transform: scale(1);
  }
}

JAVASCRIPT:

var btn = document.querySelector('input');
btn.addEventListener('click', updateBtn);

function updateBtn() {
    $el = $("<li>", {
            id: 'middle-item',
            text: "New element"
        });
    $n = $("<li></li>").hide().addClass('transReset');
    $("#middle").append($el);
     $n.show(300, function() {  $(this).removeClass('transReset') });
}

How to have smooth movements when inserting a new element?

2 Answers2