这是我的整个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语句确定该元素是否可见。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句