jquery - CSS 箭头在 jQuery slideUp 或 slideDown 动画期间隐藏

Question

我有一个顶部带有箭头的 div，它是使用 CSS 创建的:

.arrow_box {
    position: relative;
    display: none;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    padding: 20px;
    margin-top: 100px;
    width: 300px;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

为了显示这个 div，我使用了一个简单的 $('.arrow_box').slideDown(); jQuery 动画。问题是当 div 动画时，箭头被隐藏，然后一旦动画完成箭头突然显示。我希望箭头在动画期间可见。

箭头使用 :before 和 :after 伪元素显示，所以我认为 jQuery 可能在动画期间使用伪元素，但这似乎不是情况。

这是一个显示问题的 jsFiddle:http://jsfiddle.net/m9s9ouok/

Answer 1

jQuery 的 slideDown() 使用 overflow:hidden 来防止内容在元素高度动画时溢出。

我通过强制元素的溢出可见(通过使用 !important)并添加一个溢出被隐藏的内部元素而获得成功。

$(function() {
  $('a').click(function(e) {
    e.preventDefault();
    $('.arrow_box').slideDown(2000);
  });
});

.arrow_box {
  position: relative;
  display: none;
  background: #88b7d5;
  border: 4px solid #c2e1f5;
  padding: 20px;
  margin-top: 100px;
  width: 300px;
  overflow: visible!important;
}
.arrow_box .inner {
  max-height: 100%;
  overflow: hidden;
}
.arrow_box:after,
.arrow_box:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow_box:after {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #88b7d5;
  border-width: 30px;
  margin-left: -30px;
}
.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #c2e1f5;
  border-width: 36px;
  margin-left: -36px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Reveal</a>

<div class="arrow_box">
  <div class="inner">
    content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>
  </div>
</div>