动画上下轮播滚动(无抖动)

动画上下轮播滚动
html

  <div class="demo-list"><ul class="rowup"><!-- 此处数据为真实数据2倍 --><li class="item_txt" @click="toAnnouncement(item)" v-for="(item,index) in noticeList" :key="index + 'aa'"><span class="dot" v-if="$store.state.isChinese ? item.content : item.contentEn"></span><span class="item_content"style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;">{{$store.state.isChinese ? item.content : item.contentEn}}</span></li><li class="item_txt" @click="toAnnouncement(item)" v-for="(item,index) in noticeList" :key="index + 'bb'"><span class="dot" v-if="$store.state.isChinese ? item.content : item.contentEn"></span><span class="item_content"style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;">{{$store.state.isChinese ? item.content : item.contentEn}}</span></li></ul></div>

css

  .demo-list {.rowup {height: unset;-webkit-animation: 10s rowup linear infinite normal;animation: 10s rowup linear infinite normal;position: relative;li {height: 93px;}}.rowup:hover {animation-play-state: paused !important;}}
// 首页动画滚动效果
/* 动画 */
@keyframes rowup {0% {}100% {transform: translateY(-50%);}
}

动画上下轮播滚动(无抖动)相关推荐

Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
绑定bindchange事件的微信小程序swiper闪烁，抖动问题解决，（将微信小程序切换到后台一段时间，再打开微信小程序，会出现疯狂循环轮播，造成抖动现象）
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象) 参考文章: (1)绑定bindchang ...
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
js动画——图片轮播
js动画--图片轮播 1.对搜索引擎友好 2.对美工友好,因为数据和代码是分开的,完全不懂js的都可以用fontpage修改动画内容可以把js代码保存为一个文件然后<script s ...
vue页面切换动画-类似于轮播效果、渲染列表给每一行数据加上显示动画
vue页面切换动画-类似于轮播效果 <transition :name="transitionName"><router-view/> </trans ...
数据消息轮播滚动
1.显示单条消息需求缓慢移入等待事件缓慢移出获取整体数据绝对高度动画效果实现两个定时器第一个定时器为一个消息进来到等待出去的整体间隙定时器内是消息进来的缓慢动画效果实现过程是操作整 ...
微信小程序vue轮播图_微信小程序-swiper（轮播图）抖动问题
ps:问题组件swiper(轮播图)真机上不自动滚动一直卡在那里抖动以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...
jq实现表格轮播滚动——技能提升
今天在做电视机的项目,除了单位要转为自适应的rem之外,还有一个点就是表格要实现轮播. 效果图如上,表格中是一条条的数据,需要实现表格中的数据向上滚动,每次滚动的就是一行数据的高度. 我的jq技能几乎 ...
qt 动画顺序轮播图轮播图
Show time! 简单来说,就是一个轮播图. 切换的时候是有动画的. 点击下面的按钮可以切换动画. 图片可以是很多张很多张的,但显示在窗口上的只有三张,但它们的顺序是不会变的. 如果能直接有qml ...

动画上下轮播滚动(无抖动)

动画上下轮播滚动(无抖动)相关推荐

最新文章

热门文章