vue+animation動(dòng)畫(huà)實(shí)現(xiàn)跑馬燈效果

更新時(shí)間：2022年04月07日 12:24:29 作者：Upward?Force

這篇文章主要為大家詳細(xì)介紹了vue+animation動(dòng)畫(huà)實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+animation動(dòng)畫(huà)實(shí)現(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下

1、單行顯示，每行只顯示一條

效果圖

上代碼

<template>
? <div class="container">
? ? <div class="box">
? ? ? <!-- 假設(shè)lists列表有4個(gè)項(xiàng)，設(shè)置ul的寬度為800%（相對(duì)于box），設(shè)置li的寬度為12.5%（相對(duì)于ul是12.5%；相對(duì)于box是100%），但是li要有8個(gè)，其中4個(gè)是復(fù)制的，用來(lái)占位 -->
? ? ? <ul :style="'width:' + lists.length * 100 * 2 + '%;animation-duration:' + lists.length*2 + 's;'">
? ? ? ? <li :style="'width:' + 100 / (lists.length * 2) + '%;'" v-for="(item, index) in lists" :key="index">
? ? ? ? ? <div class="content">{{item.name}}</div>
? ? ? ? </li>
? ? ? ? <li :style="'width:' + 100 / (lists.length * 2) + '%;'" v-for="(item, index) in lists" :key="index">
? ? ? ? ? <div class="content">{{item.name}}</div>
? ? ? ? </li>
? ? ? </ul>
? ? </div>
? </div>
</template>

<script>
export default {
? name: "activity",
? data() {
? ? return {
? ? ? lists: [
? ? ? ? { name: "馬云阿薩" },
? ? ? ? { name: "雷軍的" },
? ? ? ? { name: "王勤啊啊啊啊" },
? ? ? ? { name: "等倫倫" }
? ? ? ]
? ? };
? },
};
</script>

<style scoped>
.box {
? width: 100%;
? height: 0.6rem;
? background-color: #b32855;
? overflow: hidden;
}
.box ul {
? animation-name: move;
? /* 在style中動(dòng)態(tài)設(shè)置每一個(gè)li花費(fèi)的時(shí)間為2s */
? /* animation-duration: 8s; */
? animation-timing-function: linear;
? animation-iteration-count: infinite;
}
ul li {
? float: left;
? height: 0.6rem;
? display: flex;
? align-items: center;
}
ul li .content {
? height: 0.4rem;
? padding: 0 0.2rem;
? border-radius: 0.2rem;
? background-color: rgba(0, 0, 0, 0.2);
? color: #fff;
? display: flex;
? align-items: center;
? justify-content: space-around;
}
@keyframes move {
? 0% {
? ? transform: translateX(0);
? }
? 100% {
? ? /* 平移自身寬度的50%，ul寬度的50%，剩下的那50%用來(lái)在下一次顯示時(shí)占位 */
? ? transform: translateX(-50%);
? }
}
</style>

2、單行顯示，每行顯示多條

效果圖

上代碼

<template>
? <div class="container">
? ? <div class="box">
? ? ? <!-- 假設(shè)lists列表有4個(gè)項(xiàng)，設(shè)置ul的寬度為400%（相對(duì)于box），設(shè)置li的寬度為12.5%（相對(duì)于ul是12.5%；相對(duì)于box是50%），但是li要有8個(gè)，其中4個(gè)是復(fù)制的，用來(lái)占位 -->
? ? ? <ul :style="'width:' + lists.length * 100 + '%;animation-duration:' + lists.length*2 + 's;'">
? ? ? ? <li :style="'width:' + 100 / (lists.length * 2) + '%;'" v-for="(item, index) in lists" :key="index">
? ? ? ? ? <div class="content">{{item.name}}</div>
? ? ? ? </li>
? ? ? ? <li :style="'width:' + 100 / (lists.length * 2) + '%;'" v-for="(item, index) in lists" :key="index">
? ? ? ? ? <div class="content">{{item.name}}</div>
? ? ? ? </li>
? ? ? </ul>
? ? </div>
? </div>
</template>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: