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

Question

我有一个使用CSS在顶部创建箭头的div:

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