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

时间:2018-12-13 09:41:45

标签: javascript css html5 css-transitions

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

但是请使用几句话:我试图将一个元素(在这种情况下为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 :(得分:0)

尝试此解决方案

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

这是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,该元素消失了,然后0margin会使该块塌陷。

请注意,由于无法触发到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

答案 4 :(得分:0)

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

因此,我花了过去的几个小时来创建一个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/

(编辑:对小提琴进行了更改,以纠正一个小错误)