Question

抱歉，主题不是描述性的。我很难解释一下我要实现的目标。

但是请使用几句话：我试图将一个元素（在这种情况下为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的位置取决于页面大小。

Answer 1

尝试此解决方案

cellForRowAtIndexPath

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;
}

Answer 2

您可以使用要隐藏的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;
}

Answer 3

$(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。我希望这会有所帮助。

Answer 4

这是vanillaJS中带有CSS过渡的简单示例

Jsfiddle demo

更新样式，为docker-compose -p foo up -d docker-compose -p bar up -d元素添加过渡

CSS

.block

以便该函数可以通过添加.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

JS

<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>

进行删除时，由于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');
}

JsFiddle

Answer 5

感谢大家的回答！而且尽管它们全部都能起作用，但是一旦布局变得更加复杂，或者您尝试隐藏/显示更多/其他对象，它们就不会起作用。

因此，我花了过去的几个小时来创建一个Javascript解决方案，我认为该解决方案可以在任何情况下（以及在任何浏览器上）使用。

简而言之，它的工作方式是使用SetDisplay（）函数（隐藏第一个按钮）“标记”想要隐藏/显示的尽可能多的元素。完成此操作后，您无需任何参数即可调用相同的SetDisplay函数，并发现魔术发生了！实际上，JavaScript会快速删除元素，并使页面重排（所有内容对于查看器都是不可见的）。然后检查新位置，通过设置style.transition并使用position：relative和new顶部和左侧值，重新插入元素以隐藏所有其他元素并将其移动到新位置。过渡完成后，它将永久隐藏元素，重置所有更改的样式值，然后再次重排页面。

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

您可以用相同的方式重新插入元素（第二个按钮）。

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

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

（编辑：对小提琴进行了更改，以纠正一个小错误）

将元素平滑移动到新位置，而无需手动设置其位置

5 个答案: