javascript - 在点击功能上动画化图像，同时重叠其兄弟元素

Question

初次使用，需要帮助。

我有三个li li li元素，每个都有自己的<img>在里面。我想动画个人<img>当单击所选元素时，从内向外同时与其他同级元素重叠(在这种扩展效果中，同级元素不应移动)。

我的 HTML 标记:

<div class="wrapper">
   <ul>
     <li class="card">
        <div class="content">
          <img src="some-img.jpg">
        </div>
     </li>
     <li class="card">
        <div class="content">
          <img src="some-img.jpg">
        </div>
     </li>
     <li class="card">
        <div class="content">
          <img src="some-img.jpg">
        </div>
     </li>
   </ul>
</div>

CSS 标记:

.card {
  position: relative;
  width: 28%;
  height: 100px;
  float: left;
  margin: 2.5%;
  overflow: hidden;
}


.content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -50%;
  left: 0;
  transition: all 1s ease-in;
}

img {
  width: 100%;
}

JS:

$('.card').on('click','.content',function(){
  $(this).css({
     'position':'fixed',
     'z-index':'10'          
  });
});

我来回对这段代码进行了不同的迭代，但是设置了 .content 的位置to fixed 确实有点接近我正在尝试做的事情，它与其他 sibling 重叠......但没有任何平滑的过渡向外流动。

这是 codepen 中代码的链接:http://codepen.io/broham89/pen/WrJmyB

我非常非常非常感谢对此的任何帮助。

Answer 1

z-index 和 position 在技术上不是可动画的属性，因此无论哪种解决方案都必须有点 hacky。您可以通过摆弄 CSS 类和 jQuery 切换来完成此操作。我稍微更改了代码，以便主要动画/转换发生在父 li 元素上，而不是 .content 元素上。为了让所有三个 li 都保持在相同的位置，我将它们更改为具有不同 :nth-child 定位声明的绝对定位元素，并给出了 ul 相对的位置。目前，它是围绕三个元素设计的，但如果您需要更多元素，您可以尝试使用这些值(或使用 JS 来确定数学)。

此处的 jQuery 代码切换 .cardhover 类，该类将元素移动到 0 的 left 位置—— 的开始ul 容器——防止任何溢出。它还为 z-index 添加了 .cardactive ，以确保该元素在更大/更小的过渡期间位于其他元素之上。 (并且它会从开头的任何其他 sibling 中删除该类。)

https://jsfiddle.net/nn454trm/11/

    $('.card').on('click', '.content', function() {
    
    $(this).parent().siblings().removeClass('cardactive'); 
$(this).parent().addClass('cardactive').toggleClass('cardhover');
      });

ul {
  position: relative;

}

.card {

  position: absolute;
  width: 28%;
  height: 100px;
  transition: 2s;
  margin: 2.5%;
  overflow: hidden;

}

.card:nth-child(1) {
  left: 0;
}

.card:nth-child(2) {
  left: 33.3%;
}

.card:nth-child(3) {
  left: 66.66%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  transition: all 1s ease-in;
}

img {
  width: 100%;
}


.cardhover {
  width: 95%;

  left: 0% !important;
}
.cardactive {
  z-index: 20;
 background: blue; //for demo purposes
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li class="card">
      <div class="content">
        <img src="some-img.jpg" alt="" />
      </div>
    </li>
    <li class="card">
      <div class="content">
        <img src="some-img.jpg" alt="" />
      </div>
    </li>
    <li class="card">
      <div class="content">
        <img src="some-img.jpg" alt="" />
      </div>
    </li>
  </ul>
</div>