单击某个元素以使其向前滑动后的元素

iris-yu17 发表于 Dev

鸢尾

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

现在布局已全部完成，但是我在使用JavaScript时遇到了一些问题。

我怎样才能像下面的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>

如何将所有这些元素包装在一起，而不是分别包装？

还是有更好的方法来产生这种效果？

路卡

我知道您的问题的一部分已经由@charlietfl回答，因此这里仅涉及动画。这只是执行此操作的一种方法，还有许多其他执行此操作的方法。

下面提供了示例代码。

那么它是怎样工作的？

在包装盒上应用包装器以获得一个简单的动画元素（是的，您也可以仅在没有包装器的情况下使用边距为包装盒制作动画。包装器仅用于制作简单的填充动画。）

如果单击.close span，则将包装器设置为以下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。（可以简化很多）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。