專案中用到的跑馬燈等滾動特效積累
阿新 • • 發佈:2020-12-02
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%); } }