Плавное перемещение элемента в его новое положение без ручной настройки его положения - PullRequest
Новая
       15

Плавное перемещение элемента в его новое положение без ручной настройки его положения

0 голосов
/ 13 декабря 2018

Мои извинения, если тема немного не описательная.Я с трудом пытаюсь объяснить, чего я пытаюсь достичь в одной строке.

Но в нескольких предложениях: я пытаюсь получить элемент, в данном случае DIV,плавно перейти на новую позицию.Но предостережение в том, что я не устанавливаю его положение вручную.Он получает новую позицию, потому что я удаляю другие DIV из потока страниц. 

<!DOCTYPE html>
<html>
  <head>
    <style>
      .block {
        width: 200px;
        height: 20px;
        border: 1px solid black;
        margin: 20px;
      }
    </style>
    <script>
      function removeBlock() {
        document.getElementById("block2").style.display = "none";
      }
    </script>
  </head>
  <body>
    <div id="block1" class="block">
      This is block 1
    </div>
    <div id="block2" class="block">
      This is block 2
    </div>
    <div id="block3" class="block">
      This is block 3
    </div>

    <button type="button" onclick="removeBlock();">
      Remove block 2
    </button>
  </body>
</html>

Вот скрипка: https://jsfiddle.net/nfhycrkL/

Если вы нажмете кнопку, Блок 2 будет скрыт иБлок 3 движется вверх.Я хочу, чтобы этот шаг был плавным.Это вообще возможно?Я не хочу использовать абсолютное позиционирование, поскольку страница отзывчива, а положение DIV зависит от размера страницы.

Ответы [ 5 ]

0 голосов
/ 13 декабря 2018

Спасибо всем за ваши ответы!И хотя все они работают несколько, они не работают, как только макет становится более сложным, или если вы пытаетесь скрыть / показать больше / других объектов.

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

Короче говоря, оно работает так, что вы «помечаете» столько элементов, сколько хотите, чтобы они были скрыты / показаны с помощью SetDisplay () функция (см. первую кнопку).Как только это будет сделано, вы вызываете ту же функцию SetDisplay без каких-либо параметров и видите, как происходит волшебство!Javascript фактически быстро удаляет элементы и позволяет странице переформатироваться (все это невидимо для зрителя).Затем он проверяет новые позиции, повторно вставляет элементы, чтобы скрыть и перемещать все остальные элементы в их новую позицию, устанавливая style.transition и используя position: относительные и новые значения top и left.После завершения перехода он постоянно скрывает элементы, сбрасывает все измененные значения стиля и позволяет странице снова перекраситься. 

SetDisplay( "block2", "none" );
SetDisplay( "block3", "none" );
SetDisplay( "block4", "none" );
SetDisplay();

Вы можете повторно вставить элементы таким же образом (вторая кнопка). 

SetDisplay( "block2", "" );
SetDisplay();

https://jsfiddle.net/yq7xor5j/3/

(Правка: внесены изменения в скрипку для исправления небольшой ошибки)

0 голосов
/ 13 декабря 2018

Вот простой пример в vanillaJS с CSS-переходом

Jsfiddle demo

Обновите свой стиль, добавив переход для.block элемент

CSS 

.block {
  width: 200px;
  height: 20px;
  border: 1px solid black;
  margin: 20px 20px 0;
  max-height: 500px;
  transition: opacity 0s 0s, margin .25s 0s, max-height .25s 0s;
}

.removedBlock {
  box-sizing: border-box;
  opacity: 0;
  margin: 0;
  max-height: 0;
}

, чтобы функция могла запускать анимацию max-height, добавляя removedBlock класс 

<div id="block1" class="block">
  This is block 1
</div>
<div id="block2" class="block">
  This is block 2
</div>
<div id="block3" class="block">
  This is block 3
</div>

<button type="button" onclick="removeBlock('block2');">
  Remove block 2
</button>

JS 

function removeBlock(id) {
  var block = document.getElementById(id);
  block.classList.add('removedBlock');
}

При удалении элемент исчезает из-за того, что для opacity установлено значение 0, тогда margin и max-height сделаютблок рушится.

Обратите внимание, что, поскольку переход не может быть инициирован в / из значения auto, для этой цели я установил огромный стартовый max-height.Если вы хотите увидеть более плавный переход, измените это свойство на более низкое значение или просто увеличьте длительность transition.

Более совершенная версия может вместо этого получить height элемента перед применением перехода, например 

function removeBlock(id) {
  var block = document.getElementById(id);
  var blockHeight = block.offsetHeight;
  block.style.height =  blockHeight + 'px';
  block.classList.add('removedBlock');
}

, поэтому стиль становится 

.block {
  width: 200px;
  height: 20px;
  border: 1px solid black;
  margin: 20px 20px 0;
  transition: opacity 0s 0s, margin .5s 0s, height .5s 0s;
}

.removedBlock {
  box-sizing: border-box;
  opacity: 0;
  margin: 0;
  height: 0 !important;
}

JsFiddle

0 голосов
/ 13 декабря 2018

Вы можете добавить новый класс к элементу с javascript, который вы хотите скрыть и сделать переход css.

Вот небольшой пример с опциями удаления и переключения https://jsfiddle.net/nfhycrkL/9/

html:

<div id="block1" class="block">
  This is block 1
</div>
<div id="block2" class="block">
  This is block 2
</div>
<div id="block3" class="block">
  This is block 3
</div>

<button type="button" onclick="toggleBlock();">
  Toggle block 2
</button>

<button type="button" onclick="removeBlock();">
  Remove block 2
</button>

js: 

function toggleBlock() {
  document.getElementById("block2").classList.toggle('block-hidden')
}
function removeBlock() {
  document.getElementById("block2").classList.add('block-hidden')
}

css: 

.block {
  width: 200px;
  height: 20px;
  border: 1px solid black;
  margin: 0 20px 20px;
  overflow:hidden;
  transition: all .25s;
}

.block-hidden {
  height: 0px;
  margin: 0px;
  border: none;
}
0 голосов
/ 13 декабря 2018 

$(document).ready(function(){
 
  $("button").click(function(){
  //document.getElementById("block2").style.display = "none";
   $("#block2").fadeOut(1000);
  });
});
.block {
  width: 200px;
  height: 20px;
  border: 1px solid black;
  margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<div id="block1" class="block">
  This is block 1
</div>
<div id="block2" class="block">
  This is block 2
</div>
<div id="block3" class="block">
  This is block 3
</div>

<button type="button">
  Remove block 2
</button>

использование Jquery effects.Надеюсь, это поможет.

0 голосов
/ 13 декабря 2018

Попробуйте это решение 

function removeBlock()
{
  document.getElementById("block2").style.height = "0px";
  document.getElementById("block2").style.margin = "0px";
  document.getElementById("block2").style.borderWidth = "0px";
  document.getElementById("block2").style.fontSize = "0px";
}
.block {
  width: 200px;
  height: 20px;
  border: 1px solid black;
  margin: 20px;
}

#block2 {
  transition:all 0.5s linear;
}
<div id="block1" class="block">
  This is block 1
</div>
<div id="block2" class="block">
  This is block 2
</div>
<div id="block3" class="block">
  This is block 3
</div>

<button type="button" onclick="removeBlock();">
  Remove block 2
</button>
...