<style>
h2 {
padding: 20px 0
}
.textBox {
100%;
height: 40px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
}
.text {
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;
}
/* 表示离场--动画结束之后 y轴的方向是负值 */
.slide-leave-to {
transform: translateY(-20px) scale(0.8);
opacity: 0;
}
</style>
<body>
<div>
<h2>公告栏文字停顿滚动</h2>
<div >
<div class="textBox">
<transition name="slide">
<!-- slide 是表示的自定义的前缀 item表示的是计算属性中的函数 它 返回来的是一个对象-->
<p class="text" :key="item.id">{{ item.val}}</p>
</transition>
</div>
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
textArr: [
'1 第一条公告',
'2 第二条公告第二条公告',
'3 第三条公告第三条公告第三条公告'
],
//表示当前显示的是那一条数据呢
number:0,
},
// this表示的是data这个实例对象
computed: {
item(){
return{
id:this.number, //获取到当前显示的是第几条数据
val:this.textArr[this.number] //到到显示的内容
}
}
},
// 在dom熏染完了之后，就执行该函数
mounted() {
this.startMove();
},
//方法函数写在methods中
methods: {
startMove(){
console.log("我出来了")
let timer=setTimeout(()=>{
// 如何知道现在滚动到那一条数据了呢？
// 在data中定义一个id,根据id来处理。当前到底在显示那一条数据
if(this.number===2){
this.number=0;
}else{
this.number+=1;
}
this.startMove(); //将超时器改变为了定时器
},2000)
},
},
});
</script>
</body>
