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

【问题标题】：How do I animate a modal resize with javascript, jquery, or css?如何使用 javascript、jquery 或 css 为模式调整大小设置动画？
【发布时间】：2020-02-02 04:22:22
【问题描述】：

我正在使用引导程序来显示模态对话框，并使用 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>

感谢您对此的帮助-

【问题讨论】：

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

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

我想这就是你要找的。p>

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

【讨论】：