Javascript Whatsapp活动聊天列表项动画

我想知道是否有一个简单的方法来创建动画，类似于Whatsapp one

当您在聊天室屏幕上并返回聊天室列表时，一个活动元素会以灰色突出显示片刻（因此它会显示之前打开的聊天室）

---

在JS或CSS中是否没有复杂的方法来实现这一点？希望你们大多数人都知道我在说什么。不幸的是，在网上找不到任何例子…

这里是一个例子，说明如何实现效果，但没有更多关于您项目的细节，我无法做更多

var li=$（'li'）；
var messages=$（'.messages'）；
var close=$（'.close'）；
li.on（'click'，function（）{
$（this.addClass（'active'）；
messages.addClass（'active'）；
});
close.on（'单击'，函数（））{
messages.removeClass（'active'）；
li.removeClass（“活动”）；
});
html，
身体{
保证金：0；
填充：0；
字体系列：无衬线；
}
.info{
边缘底部：20px；
左侧填充：15px；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
}
李{
背景:#ececec ;；
填充：10px；
底部边框：2件纯黑；
光标：指针；
过渡：背景.2s.3s；
}
李：很活跃{
背景：灰色；
过渡：背景。3s；
}
.留言{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景：白色；
转变：转变；
转化：translateX（100%）；
填充：20px；
}
.messages.active{
变换：translateX（0）；
}
.结束{
显示：内联flex；
证明内容：中心；
对齐项目：居中；
宽度：30px；
高度：30px；
位置：绝对位置；
右：70px；
顶部：30px；
背景：黑色；
颜色：白色；
边界半径：50%；
字体大小：20px；
光标：指针；
}
.关闭：悬停{
不透明度：.7；
}

单击某人，然后单击“X”以查看效果，从而结束讨论

鲍勃
史蒂文
玛丽
马克
杰克
爱德华

大量的信息等等。。。
...
X
Mhh。我明白你所说的效果，但是。。。把这个放在哪里？你是在创建聊天应用还是什么？你需要什么？你有代码给我们看吗？你太宽泛了，请提供更多细节。我不知道是否有任何代码可以帮助你。假设我可以用JQuery“捕获”元素，并将其添加到class
$（element）.addClass（'animation'）
。现在，什么更有效，CSS关键帧还是JavaScript？那怎么开始呢？谢谢。由于缺乏信息，这可能是我能得到的最好的解决方案。这很有帮助。再次感谢。