如何将转换添加到div边界

Question

我有以下代码：

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

我希望当我点击add按钮时，内容div在展开时会有一个转换。我尝试了以下动画css：

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

我想为div 添加一个转换

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

Answer 1

您可以使用另一个元素来完成此操作。

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

我们可以使用渐变功能来实现更平滑的过渡。

$(document).ready(function() {
function initBorder() {
$("#content-border").css({
height: $("#content").outerHeight(),
width: $("#content").outerWidth(),
});
}
initBorder();
$("#add").click(function() {
$("#content").append("<p>New text</p>");
$("#content").find("p").last().fadeOut(0).fadeIn(500);
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>