項目中用到的跑馬燈等滾動特效積累

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%);
    }
}