如何给div边框添加过渡[重复]

$(document).ready(function() {
  function initBorder() {
    $("#content-border").css({
      height: $("#content").outerHeight(),
      width: $("#content").outerWidth(),
    });
  }

  initBorder();

  $("#add").click(function() {
    $("#content").append("<p>New text</p>");
    initBorder();
  });
});

#content {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  padding: 15px;
  position: relative;
}

#content-border {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid black;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  <p>TEXT</p>
  <div id="content-border"></div>
</div>

<button id="add">Add text</button>