jQuery、CSS：显示后 DOM 个元素的动画：none

Question

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

请提前寻求帮助！

Answer 1

你不能。而不是显示：none；使它的高度为：0；和过渡：高度 .5s；溢出：隐藏；

然后你会稍微移动其他div。 :)

如果你愿意，我可以做一个简单的codepen

Answer 2

如果您使用 jquery

，请使用 slideUp() 而不是 hide();

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

Answer 3

让它动起来。 jQuery 有很多方法可以做到这一点，例如：

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

Answer 4

为避免隐藏元素的宽度会干扰页面上的其他元素，您应该简单地：

$('yourElement').slideUp();

这样您就可以使 yourElement 高度具有动画效果，最后隐藏它，实际上将其从元素流中移除。

编辑：感谢 A. Wolff 的评论。在 .slideUp().

之后删除了不需要的 .hide() 函数

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：显示后 DOM 个元素的动画：none

jQuery, CSS: Animating following DOM Elements after display: none

javascript

css

jquery

dom

display