How to realize the fly-in effect of wireless scrolling list on the large visual screen of vue

Today, I would like to share with you how the vue visualization screen to achieve wireless scrolling list fly into the effect of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.

1. The effect is as follows

2. The code is as follows (because the project is vite and vue3.0, element-plus)

{{item.name}}

{{item.reportTime}}

{{item.eventLocation}}

Const cssIndex = ref (0) const list method = () = > {/ / after getting the list list, both res.data and Data.IncidentData are lists cssIndex.value = 0 res.data.forEach ((item) Index) = > {if (Data.IncidentData.length = 0 | | Data.IncidentData.length < index) {cssIndex.value + = 1 item.style = {animationDelay: `${cssIndex.value * 0.3} s` / / load animation}} else {item.style = {animationDelay: `0s` / / if scrolling sets the previous animation to 0}) Data.IncidentData = res.data} .IncidentMediateli {transform: translateX Animation: rise-in 1s forwards; @ keyframes rise-in {to {transform: translateX (0);} above is all the content of the article "how to realize the effect of wireless scrolling list flying into the vue visualization screen". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.