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>

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

1 个答案: