文字向上滚动+动画（改进版）

前端时间帮朋友写了个动画效果传送门

朋友用了之后反馈说放到app的webview中有卡顿现象，然后他发我一个改进版，思路差不多

<template><div id="box"><ul id="con1" ref="con1" :class="{ anim: animate == true }"><liclass="item":class="{ current: index == 0 }"v-for="(item, index) in items":key="index">{{ item.name }}</li></ul></div>
</template>
<script>
export default {data() {return {animate: false,items: [{ name: "马云", isActive: true },{ name: "雷军", isActive: false },{ name: "马化腾", isActive: false },// {name:"王勤4",isActive:false},// {name:"雷军1",isActive:false},// {name:"王勤2",isActive:false}],};},created() {setInterval(this.scroll, 5000);},mounted() {},methods: {scroll() {this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置truedocument.getElementsByClassName("item")[1].className = "item okkk";setTimeout(() => {//  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的document.getElementsByClassName("item")[1].className = "item";this.items.shift(); //删除数组的第一个元素this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动}, 4000);},},
};
</script>
<style lang="scss" scoped>
#box {width: 300px;height: 64px;overflow: hidden;padding-left: 30px;border: 1px solid black;font-size: 12px;
}
.anim {transition: all 4s;margin-top: -30px;
}
.okkk {transition: all 4s;font-size: 20px;opacity: 1;color: red;
}
#con1 li {list-style: none;line-height: 30px;height: 30px;opacity: 0.7;
}
.current {color: red;font-size: 20px;
}
</style>

文字向上滚动+动画（改进版）相关推荐

Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...
jQuery实现文字向上滚动
在一些网页中,我们会看到有一行或多行文字向上滚动,就像轮播一样.那我们如何实现它呢,现在就开始吧! 单行文字 html代码 <div id="scrollDiv"> & ...
原生JS实现公告栏文字向上滚动
HTML代码: <div id="top_message"><span style="font-size:19px; position:absolute ...
小程序文字循环滚动动画（完美解决）
解决问题: 1.文字循环播放特效 2.小程序退出.隐藏后台动画停止(已解决) 效果: 代码: wxml <view animation="{{animation}}" cla ...
关于文字向上滚动效果
1.文字无缝向上滚动 <div class="tui-new-apply clearfix"><span>[最新资讯]</span><ul ...
js 停顿一秒_js实现文字向上滚动，并且每滚动一行停顿几秒的效果_蓝戒的博客...
前端工程师的一般性特点: 1.技术控,会前端,也会一门非前端语言. 2.对异性的期望较高但是实际情况相反. 3.对IE系列尤其是IE6同仇敌忾. 4.很多人多才多艺,但不经常炫出来. 5.喜欢尝试新鲜 ...
C语言屏幕字体滚动显示,想实现显示屏上文字向上滚动的操作，哪位大大能帮忙啊...
我在编写stm32实现can总线通信的程序,在循环模式下,传输的数据比较多,屏幕无法全部显示,于是就想在每次显示数据之前加入一个可以将之前的数据向上推移的程序.哪位大大能给出程序么?或者给点其他的建议 ...
android TextView向上滚动（模仿滚动文字广告效果）
android文字向上滚动效果没有自带的控件,这就需要开发者根据算法精确按照时间和坐标来实现TextView控件的向上移动,从网上找过几个框架,基本都会有bug,于是自己写了一个自定义控件,来实现Te ...
原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...

文字向上滚动+动画（改进版）

文字向上滚动+动画（改进版）相关推荐

最新文章

热门文章