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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何给div边框添加过渡[重复]相关的知识,希望对你有一定的参考价值。

我有以下代码。

$(document).ready(function(){
  $("#add").click(function(){
    $("#content").append("<p>New text</p>");
  });
});
#content{
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  padding: 15px;
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<p>TEXT</p>
</div>
<button id="add">Add text</button>

我希望当我点击按钮添加,内容div将有一个过渡,当他扩大.我已经尝试与以下动画css :

-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;

我想给div添加一个过渡。

我也试过用 .show('slow');

答案

你可以使用另一个元素来实现。

$(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>

以上是关于如何给div边框添加过渡[重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何正确地将多个片段添加到片段过渡?

如何给div层加上图片边框

如何给一个div设置两个颜色不同的边框?

当 1 px 边框添加到 div 时,Div 大小增加,不想这样做[重复]

添加边框“下推”内容[重复]

怎么用ccs 给图片加边框 急!