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 第一条公告''3 第三条公告第三条公告第三条公告'
              ],//表示当前显示的是那一条数据呢   
              number:0 this表示的是data这个实例对象
           computed: {
               item(){
                   return{
                       id:this.number,获取到当前显示的是第几条数据
                       val:this.textArr[this.number]  到到显示的内容
                   }
               }
           },1)"> 在dom熏染完了之后，就执行该函数
           mounted() {
               this.startMove();
           },1)">方法函数写在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>

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

相关推荐