如何使用 javascript、jquery 或 css 为模态调整大小设置动画？

Question

我正在使用引导程序来显示模态对话框和 jquery 来动态显示/隐藏模态的某些元素。 我遇到的问题是，当我显示或隐藏一个项目时，模态会立即调整大小。 我想做的是使用 jquery 或 css 动画将其转换为新的大小。

我试图用 css 来完成这个：

.modal {
    flex-grow: 1;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

但这没有用。

这是我正在使用的示例模态：

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
           <p>A paragraph</p>
        </div>
    </div>
</div>

感谢您对此的帮助-

Answer 1

显然，当使用 css 或 javascript 将内容添加到元素时为元素设置动画几乎是不可能的。 我仍然没有找到仅使用 css 的方法。 它与浏览器立即呈现内容并更新自动高度元素有关。 这显然不会触发任何 css 转换。 更糟糕的是，使用 javascript 时也是如此。 这里使用的技术来自这个答案，是一个 jQuery 解决方案： https : //stackoverflow.com/a/1520352/1819684

我想这就是你要找的。

 $('#add-content').on('click', function() { $('<p>Moar Stuff</p>').css({display: 'none'}).appendTo(('.modal-body')).show('slow'); });

 .modal-body { overflow:hidden; transition:transform 19s ease-out; // note that we're transitioning transform, not height! height:auto; transform:scaleY(1); // implicit, but good to specify explicitly transform-origin:top; // keep the top of the element in the same place. this is optional. }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p id="content">...</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="add-content">Add Content</button> </div> </div> </div> </div>