<!-- 总结：
1 data中的是一个对象
2 this表示的是data中的这个实例对象
3 在mounted中去调用函数
3.1 computed中去返回的是一个对象
4 如何将超市器变为定时器
5.textBox是包裹transition的盒子，
（1）给一个固定的高度，
（2）超出部分消失
（3） width: 100%;
<style> 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; } /* 表示离场--动画结束之后 y轴的方向是负值 */ .slide-leave-to { transform: translateY(-20px) scale(0.8); opacity: 0; } </style>
<body> <div> <h2>公告栏文字停顿滚动</h2> <div id="app"> <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>
