Question

一个简单的问题。
如果我将div设置为display: none，DOM中的以下元素将跳到div所在的位置。
如何设置跳转的动画，它只是轻轻地向上移动？

提前为每个帮助提醒！

Answer 1

你做不到。而不是显示：无;使用高度：0;和过渡：高度.5s;溢出：隐藏;

然后你会稍微移动其他div旁边的其他div。：）

如果你想，我可以制作一个简单的代码。

Answer 2

如果您使用jquery

，请使用slideUp()代替hide();

$('.hidden').slideUp();

Answer 3

只是为它制作动画。 jQuery有很多方法可以做到这一点，例如：

$('#myDiv').hide(200); // 200ms

Answer 4

为避免隐藏元素的宽度可能会干扰页面上的其他元素，您应该只需：

$('yourElement').slideUp();

通过这种方式，您可以使yourElement高度生成动画，最后将其隐藏，实际上将其从元素流中移除。

编辑：感谢A. Wolff的评论。在.hide()之后删除了不需要的.slideUp()功能。

Answer 5

为您提供更好的解决方案。每次单击粉红色框时，您都可以显示和隐藏蓝框。

$('.pinkBox').click(function() {
  $('.pinkBox').addClass('show');
  $('.blueBox').addClass('displayed');
});

$('.blueBox').click(function() {
  $('.pinkBox').removeClass('show');
    setTimeout(function() {
        $('.blueBox').removeClass('displayed');
    }, 300);
});

.blueBox {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: all .3s ease;
  position: absolute;
  display: none;
}
.pinkBox {
  height: 100px;
  width: 100px;
  background-color: pink;
  transition: all .3s ease;
  position: absolute;
}
.show {
  transform: translateY(100px);
}
.displayed {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='blueBox'>
</div>

<div class='pinkBox'>
</div>

jQuery，CSS：在display：none之后设置以下DOM元素的动画

5 个答案: