CSS arrow hides during jQuery slideUp or slideDown animation

问题

I have a div with an arrow on top created using 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;
}

To show this div, I'm using a simple $('.arrow_box').slideDown(); jQuery animation. The problem is that while the div is animating, the arrow is hidden, then as soon as the animation is complete the arrow shows abruptly. I want the arrow to be visible during the animation.

The arrow is shown using :before and :after pseudo elements, so I thought maybe jQuery uses pseudo elements during the animation, but that doesn't seem to be the case.

Here is a jsFiddle showing the problem: http://jsfiddle.net/m9s9ouok/

回答1:

jQuery's slideDown() uses overflow:hidden to prevent content from overflowing while it animates the element's height.

I had success by forcing the element's overflow to be visible (by using !important) and adding an inner element whose overflow is hidden.

$(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>

来源：https://stackoverflow.com/questions/31792409/css-arrow-hides-during-jquery-slideup-or-slidedown-animation