<template>
<div>
<h2>公告栏文字停顿滚动</h2>
<div class="textBox">
<transition name="slide">
<p class="text" :key="text.id">{{text.val}}</p>
</transition>
</div>
</div>
</template>
<script>
export default {
name: 'scroll',
data () {
return {
textArr: [
'1 第一条公告',
'2 第二条公告第二条公告',
'3 第三条公告第三条公告第三条公告'
],
number: 0
}
},
computed: {
text () {
return {
id: this.number,
val: this.textArr[this.number]
}
}
},
mounted () {
this.startMove()
},
methods: {
startMove () {
// eslint-disable-next-line
let timer = setTimeout(() => {
if (this.number === 2) {
this.number = 0;
} else {
this.number += 1;
}
this.startMove();
}, 2000); // 滚动不需要停顿则将2000改成动画持续时间
}
}
}
</script>
<style scoped>
h2 {
padding: 20px 0
}
.textBox {
width: 100%;
height: 40px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
}
.text {
width: 100%;
position: absolute;
bottom: 0;
}
.slide-enter-active, .slide-leave-active {
transition: all 0.5s linear;
}
.slide-enter{
transform: translateY(20px) scale(1);
opacity: 1;
}
.slide-leave-to {
transform: translateY(-20px) scale(0.8);
opacity: 0;
}
</style>
vue实现公告栏文字上下滚动效果
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 所说的吸顶效果就是在页面没有滑动之前，导航栏的效果如下图所示： 当页面向上滑动之后，导航栏始终固定在页面的上方。 ...
- 本文介绍游戏中常见的滚动播放的公告栏实现 要点 文字内容横向或者纵向滚动 文字只在区域内显示，超出区域部分不显示 ...
