vue横向滚动文字,vue数字滚动效果
本文主要详细介绍了vue对文本滚动效果和公告滚动的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue实现文本滚动效果的具体代码，供大家参考。具体内容如下。
项目需求：系统宣布牛皮广告的效果从右向左播放。
实现：
方案一：使用CSS3的timer和transitional属性。
模板
div class=通知卡包装
div id= message-wrap ref= out class= message
div id= con 1 ref= con 1 :class= { anim:animate==true } style= margin-left:2500 px；
span v-html=注意/span
/div
/div
/div
/模板
键标ref=con1和内部跨度con1上有一个anim样式，根据animate变量的变化动态变化。
注意，我在这里给出了一个左边距的初始位置：2500px。
data() {
返回{
动画：真的，
注意： ，
无效：空//计时器id
}
},
定义所需的属性变量。
已安装(){
This.scroll() //动画先执行一次。
this . interval=setinterval(this . scroll，16000)//间隔后重复
},
已更新(){
},
销毁(){
Clear interval(this . interval)//清除计时器
},
方法：{
//通过异步ajax获取公告内容，跳过
handleFetchNotice() {
fetchNotice()。然后(res={
this.notice=res.data.notice
}).catch(错误={
console.log(错误)
})
},
//定义动画
滚动(){
this.animate=true
const con1=this。$refs.con1
setTimeout(()={
con1.style.marginLeft=-500PX
}, 500)
setTimeout(()={
con1.style.marginLeft=2500px
this.animate=false
}, 15000)
}
}
说明：执行动画功能，500ms后将refs.con1的左边距值改为-500px。此时标签的转场属性为真，会将变化过程动画化。15000毫秒后，将margin-left值返回到初始状态，将transition属性更改为false，并切断动画。
最后一步是在css中定义过渡样式。
样式lang=scss 。动画{
过渡：全部15s线性；
}
/风格
Margin-left有从2500px变化到-500px的过程，转场动画线性执行15s。
然后，计时器在16000毫秒后重复计时。
已经修改成css3动画了，简单多了。
模板
div class=通知卡包装
div class=header
div class=title
！-系统公告-
div class=消息
div class=内部容器
span v-html=注意/span
/div
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称：系统通知，
组件：{
},
data() {
返回{
注意：‘我在播文字内容，哈哈哈哈，你看不惯，我页面上不知道。’
}
},
计算值：{
},
已创建(){
},
方法：{
}
}
/脚本
style lang=scss 范围。通知-卡片包装{。内部容器{
左边距：100%；//将文本移出可见区域
宽度：200%；
动画：myMove 30s线性无限；//聚焦，定义动画
动画-填充-模式：向前；
}
/*文本无缝滚动*/
@关键帧myMove {
0% {
transform:translate x(0)；
}
100% {
transform:translate x(-2500 px)；
}
}
}
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。