项目中用到的跑马灯、无缝滚动等滚动特效积累

1.普通滚动

<div class="info">
                    <transition name="slide" mode="out-in">
                        <div class="con" v-if="number == 0" key="money">
                            <div>发射心心得奖金</div>
                            <div class="money">
                                <img src="../../assets/images/v3/icon_win_money.png" alt="">
                                <div>{{info.total_money | moneyFormat}}元</div>
                            </div>
                        </div>
                        <div class="con" key="rank">
                            <div class="rank">
                                <img src="../../assets/images/v3/icon_win_hot.png" alt="">
                                <div>排名:{{info.rank_num  > 100 ? '100+' : info.rank_num}}</div>
                            </div>
                            <div class="score">
                                <img src="../../assets/images/v3/icon_win_heart.png" alt="" style="margin-right: 7px;">
                                <div>心心:{{changelike(info.received_num)}}</div>
                            </div>
                        </div>
                    </transition>
                </div>

totalDuration: 5000,
                number: 0,
                timeOutEvent: null,
                timeIntevalEvent: null,
                longlock: false,
                showMoney:false,
                moneyQueue:[],
                popMoney:''
            }
        },
        filters:{
            moneyFormat(value){
                return (value * 1.0 / 100).toFixed(2)
            }
        },
        methods: {
            startMove() {
              clearTimeout(this.scrollTimer);
              this.scrollTimer = setTimeout(() => {
                if (this.number === 1) {
                  this.number = 0;
                } else {
                  this.number += 1;
                }
                this.startMove();
              }, this.totalDuration);
            },
mounted(){
this.startMove()
}

.info{
            width: 140px;
            height: 57px;
			margin-left:18px;
			margin-top:35px;
			overflow:hidden;


.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-leave-to {
  transform: translateY(-57px);
}
.slide-enter {
  transform: translateY(57px);
}

 2.无缝滚动(不停顿)

http://www.cppcns.com/wangluo/javascript/366410.html(原理+左右滚)

上下滚

<div class="info-inner">
                    <div class="info">
                        <div class="con">
                            <div>发射心心得奖金</div>
                            <div class="money">
                                <img src="../../assets/images/v3/icon_win_money.png" alt="">
                                <div>{{info.total_money | moneyFormat}}元</div>
                            </div>
                        </div>
                        <div class="con">
                            <div class="rank">
                                <img src="../../assets/images/v3/icon_win_hot.png" alt="">
                                <div>排名:{{info.rank_num  > 100 ? '100+' : info.rank_num}}</div>
                            </div>
                            <div class="score">
                                <img src="../../assets/images/v3/icon_win_heart.png" alt="" style="margin-right: 7px;">
                                <div>心心:{{changelike(info.received_num)}}</div>
                            </div>
                        </div>
                        <div class="con">
                            <div>发射心心得奖金</div>
                            <div class="money">
                                <img src="../../assets/images/v3/icon_win_money.png" alt="">
                                <div>{{info.total_money | moneyFormat}}元</div>
                            </div>
                        </div>
                        <div class="con">
                            <div class="rank">
                                <img src="../../assets/images/v3/icon_win_hot.png" alt="">
                                <div>排名:{{info.rank_num  > 100 ? '100+' : info.rank_num}}</div>
                            </div>
                            <div class="score">
                                <img src="../../assets/images/v3/icon_win_heart.png" alt="" style="margin-right: 7px;">
                                <div>心心:{{changelike(info.received_num)}}</div>
                            </div>
                        </div>
                    </div>

.info-inner{
            width: 140px;
            height: 57px;
            margin-left:18px;
            margin-top:35px;
            overflow:hidden;
        }
        .info{
            animation-name: seamless-scrolling;
            animation-timing-function: linear; 
            animation-iteration-count: infinite;
            animation-duration:10s;
            animation-fill-mode: forwards;

@keyframes seamless-scrolling {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

 3.无缝滚动（停顿播放，每隔几秒滚一下）

 

跑马灯组件（网上的互抄又乱，所以理解原理，自己写了下，可以演变成左右按钮操作滚动、上下滚、数字翻滚等特效）

<template>
  <div class="sec-alert">
    <div class="sec-con" >
        <div class="list-con" ref="list" :style="{'transform':`translateX(${ti}px)`}">
            <div class="notice-line" :key="index" v-for="(tip,index) in tips">{{htmlFilter(tip)}}</div>
            <div class="notice-line" :key="`${index}_copy`" v-for="(tip,index) in tips">{{htmlFilter(tip)}}</div>
        </div>
    </div>
  </div>
</template>
<script>
import { htmlFilter } from "../lib/index";
let timer
export default {
  name: 'Broadcast',
  props: {
      alerts:{
          type:Array,
          default:()=>[]
      }
  },
  data() {
    return {
      ti: 0,
      tips: []
    }
  },
  methods:{
      htmlFilter(value){
          return htmlFilter(value)
      },
      startAnimate() {
          if (timer) clearInterval(timer)
          
          this.ti = 0
          this.tips = this.alerts
          if(this.alerts.length === 1){
              return;
          }
         
          timer = setInterval(() => {
           this.ti -= 413
           this.$refs.list.style.transition = 'transform 4s linear'//时间差值
           if(Math.abs(this.ti)>=Math.abs(this.alerts.length*413)){
            setTimeout(()=>{
                this.ti = 0
                this.$refs.list.style.transition = 'none'
            },4000)//和动画时间差值的吻合 滚到头归位的时候 这样不会卡顿
           }
          }, 5000);
     }
  },
  mounted() {
    if (this.alerts && this.alerts.length) {
      this.startAnimate()
    }
  },
  created(){
  },
  watch: {
  },
  destroyed() {
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  }
}
</script>
<style lang="postcss" scoped>

  .sec-alert {
    width:503px;
    margin:0 auto;
    height: 62px;
    overflow: hidden;
    background:url('../assets/images/broadcast_bg.png') no-repeat;
    background-size:100%;
    
    .notice-line{
      width:100%;
      height:62px;
      font-size:24px;
      font-weight:400;
      color:rgba(76,76,76,1);
      line-height:62px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      flex-shrink:0;
    }
    
    .sec-con{
       width:413px;
       height:62px;
       margin-left:75px;
       margin-right:15px;
       overflow: hidden;
    }
    .list-con{
        height:100%;
        display:flex;
        flex-wrap: nowrap;
    }
  }
</style>