这是我的整个 HTML 和 CSS:
我正在从头开始构建聊天。我有一个包含 div 的可滚动 div,每条已发送的消息都有一个。有点像
<div>
(undefined number of divs pertaining to the same class)
</div>
我想为消息设置动画,以便它们在滚动时变得可见/不可见,理想情况下不允许部分看到消息。消息要么被看到,要么不被看到,而不是像现在这样半途而废。
由于是聊天,消息会堆积起来,所以 scrolltop() 会增加,每条消息的高度也会根据文本的多少而变化,所以我不知道该怎么做.
最佳答案
希望我明白你的意思。这是我对您问题的解决方案:http://jsfiddle.net/silveraven/WgL9z/10/
最重要的是:
CSS:
#mesanjescont{
position: relative;
}
.not-visible {
opacity: 0 !important;
}
.mensaje{
opacity: 1;
-webkit-transition: opacity 2s;
/* Safari */
transition: opacity 2s;
}
这将帮助您创建元素的动画显示/隐藏。
JavaScript (I used jQuery 1.11.0):
if (mensajeTop + mensajeHeight > mensajescontHeight || mensajeTop + mensajeHeight < 0){
$(this).addClass("not-visible");
} else {
$(this).removeClass("not-visible");
}
此 if-else 语句确定元素是否可见。
关于jquery - (jQuery) 如何在可滚动的 div 中的元素在滚动时出现动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24602201/