Блог

Я тренируюсь и пытаюсь создать страницу в 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>
 

Как мне объединить все эти элементы вместе, вместо того, чтобы создавать перенос для каждого?

Или есть какой-нибудь лучший способ добиться этого эффекта?

Я знаю, что @charlietfl уже ответил на часть вашего вопроса, так что здесь речь идет только об анимации. Это всего лишь один из способов сделать это, и есть много других для этого.

Пример кода доступен ниже.

Итак, как это работает?

Примените оболочку к блоку, чтобы получить простой элемент для анимации (да, вы также можете просто анимировать поле с полями и без оболочки. Оболочка предназначена только для создания простой анимации заполнения.)

Если щелкнуть .close span, оболочке присваивается следующий CSS:

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

Поскольку оболочка имеет

 transition: 0.5s;
 

он будет красиво скользить влево. (в данном случае переход применяется к ширине, непрозрачности и заполнению)

И, возможно, подумайте о том, чтобы что-то сделать с z-индексом (анимация непрозрачности немного уродлива перед другими элементами).

Я надеюсь, что смогу кому-нибудь помочь — Хорошего дня!

 $(".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 amp; .box, анимация непрозрачности и js. (может быть значительно упрощен)