01--顶部的通告特效---仅显示一条一条滚动

<!-- 总结：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>