javascript - 单击一个元素，让其后的元素向前滑动

Question

我正在练习并尝试制作一个 instagram 页面。

现在布局已经完成，但我在使用 javascript 时遇到了一些问题。

我如何制作像 instagram 这样的效果，如下 gif 所示？

当单击元素时，我使 css 显示：无。

但我不确定如何在元素向前滑动后制作元素。

请参考下面的 gif。

我的想法是：

单击一个元素时，将其后的元素换行，然后更改换行 css 位置。我使用了 jquery wrap()，但它没有按我的意愿工作。

比如原来的代码是这样的

<div class="box">111</div>
<div class="box">222</div>
<div class="box">333</div>
<div class="box">444</div>
<div class="box">555</div>

我用了

      $(".box").click(function () {
        $(this).nextAll().wrap('<div class="wrap"></div>');
      });

如果我点击 222，结果将是

<div class="box">111</div>
<div class="box">222</div>
<div class="wrap">
    <div class="box">333</div>
</div>
<div class="wrap">
    <div class="box">444</div>
</div>
<div class="wrap">
    <div class="box">555</div>
</div>

但我希望它是这样的

<div class="box">111</div>
<div class="box">222</div>
<div class="wrap">
    <div class="box">333</div>
    <div class="box">444</div>
    <div class="box">555</div>
</div>

我如何将所有这些元素包装在一起，而不是给每个元素一个包装？

或者有没有更好的方法来产生这种效果？

标签： javascripthtmljquerycss

Answer 1

我知道@charlietfl 已经回答了您的部分问题，所以这里只是关于动画。这只是一种方法，还有很多其他方法可以这样做。

下面提供了一个示例代码。

那么它是怎样工作的？

将包装器应用于盒子以获得简单的动画元素（是的，您也可以只使用边距为盒子设置动画而没有包装器。包装器仅用于制作简单的填充动画。）

如果单击 .close 跨度，则包装器将设置为以下 CSS：

width: 0;
opacity: 0;
padding-left: 0;
padding-right: 0;

因为包装器有

transition: 0.5s;

它会很好地向左滑动。（在这种情况下，过渡适用于宽度、不透明度和填充）

也许考虑用 z-index 做一些事情（不透明动画在其他元素的前面有点难看）。

我希望我能帮助任何人——祝你有美好的一天！

$(".close").click(function(){
    var el = $(this).closest(".box_wrapper");
    el.css("width", 0);
    el.css("opacity", 0);
    el.css("padding-left", 0);
    el.css("padding-right", 0);
    setTimeout(function() {
      el.remove();
    }, 500);
});

.box_wrapper {
  float: left;
  transition: 0.5s;
  width: 100px;
  height: 200px;
  padding: 15px;
}

.box {
  background-color: lightgrey;
  width: 100px;
  height: 100%;
  padding: 10px;
} 

.close {
  float: right;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box_wrapper">
  <div class="box"><span class="close">X</span>1</div>
</div>
<div class="box_wrapper">
  <div class="box"><span class="close">X</span>2</div>
</div>
<div class="box_wrapper">
  <div class="box"><span class="close">X</span>3</div>
</div>
<div class="box_wrapper">
  <div class="box"><span class="close">X</span>4</div>
</div>

是的，这段代码并不完美。有一些需要改进的地方，比如 .box_wrapper 和 .box 上的填充、不透明动画和 js。（可以简化很多）