如何给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>

给TA打赏
共{{data.count}}人
人已打赏
解决方案

从SQL服务器为数据集的每一行发送电子邮件。

2022-4-20 11:08:45

解决方案

被apt --fix-broken安装卡住了(libc6:amd64包安装后)。

2022-4-20 12:08:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索