我有一个顶部带有箭头的 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/
最佳答案
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 - CSS 箭头在 jQuery slideUp 或 slideDown 动画期间隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31792409/