Bootstrap 4.0.0 模态轮播相册动画调整大小错误

Question

我正在尝试创建一个由相册（模态）组成的画廊；每个模态里面都有一个基本的轮播幻灯片。
里面的图片可以有不同的高度：我找到了动画高度变化的方法，但是当我用 data-slide-to="x" 打开模式时直接打开不同高度的图像，不会显示。

我做了一个fiddle的问题：here

如果你打开第一个模式并浏览图片，一切都可以。但是，如果您在幻灯片 1 或 3（方形）上关闭第一个模态，然后打开第二个模态（重定向到幻灯片 2，它具有不同的高度），动画会突然 height: 0

我该如何解决这个问题？谢谢。

Answer 1

问题是您在同一个 html 元素上设置了轮播和模式，所以 e.relatedTarget 不是您所期望的

我建议将旋转木马 div 移动到模态主体内部并为其赋予自己的 ID，如下所示：

$('.carousel').on('slide.bs.carousel', function(e) {
  $(this).find('.carousel-inner').animate({
    height: $(e.relatedTarget).height()
  }, 300);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container text-center py-4 my-5">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-4">
      <div class="card mb-4">
        <img src="https://via.placeholder.com/400x300?text=first%20album" class="w-100">
        <div class="card-body">
          <p class="card-text text-dark">first element</p>
          <div class="d-flex justify-content-between align-items-center">
            <a href="#lightbox" class="btn btn-sm btn-primary px-4" data-toggle="modal" data-slide-to="0" role="button">open</a>
            <button type="button" class="btn btn-sm btn-secondary">
                  some action
                </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4">
      <div class="card mb-4">
        <img src="https://via.placeholder.com/400x300?text=second%20album" class="w-100">
        <div class="card-body">
          <p class="card-text text-dark">second element</p>
          <div class="d-flex justify-content-between align-items-center">
            <a href="#lightbox" class="btn btn-sm btn-primary px-4" data-toggle="modal" data-slide-to="1" role="button">open</a>
            <button type="button" class="btn btn-sm btn-secondary">
                  another action
                </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="lightbox" class="modal fade position-absolute" role="dialog">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
      <div class="carousel slide" data-ride="carousel" tabindex="-1" id="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel" data-slide-to="0" class="pointer active"></li>
          <li data-target="#carousel" data-slide-to="1" class="pointer"></li>
          <li data-target="#carousel" data-slide-to="2" class="pointer"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="https://via.placeholder.com/350">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://via.placeholder.com/700x450">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://via.placeholder.com/550">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          </a>
        <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
          </a>
          </div>
      </div>
      <div class="modal-footer px-3 pb-3 pt-0">
        <h5 class="modal-title text-uppercase mr-auto">Album num.X</h5>
        <a href="#" role="button" data-dismiss="modal" class="btn btn-primary px-3">Close</a>
      </div>
    </div>
  </div>
</div>

Fiddle here

Bootstrap 4.0.0 模态轮播相册动画调整大小错误

Bootstrap 4.0.0 modal carousel albums animate resize bug

twitter-bootstrap

modal-dialog

height

carousel

gallery