我有一个使用 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 and :after伪元素，所以我想也许 jQuery 在动画期间使用伪元素，但情况似乎并非如此。
这是显示问题的 jsFiddle：http://jsfiddle.net/m9s9ouok/ http://jsfiddle.net/m9s9ouok/
jQuery 的slideDown() uses 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
