如何给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边框添加过渡[重复]的主要内容，如果未能解决你的问题，请参考以下文章