Question

我试图创建一个由专辑（模态）组成的画廊;每个模态都有一个基本的旋转木马幻灯片里面的图片可以有不同的高度：我找到了设置高度变化动画的方法，但是当我用data-slide-to="x"打开模态时，会直接打开不同高度的图像，但不会显示。

我弄清了问题：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>

小提琴here

Bootstrap 4.0.0 modal carousel albums animate resize bug

1 个答案: