vue+animation动画实现跑马灯效果
作者：Upward Force
这篇文章主要为大家详细介绍了vue+animation动画实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+animation动画实现跑马灯效果的具体代码，供大家参考，具体内容如下
1、单行显示，每行只显示一条
效果图
上代码
<template>
<div class="container">
<div class="box">
<!-- 假设lists列表有4个项，设置ul的宽度为800%（相对于box），设置li的宽度为12.5%（相对于ul是12.5%；相对于box是100%），但是li要有8个，其中4个是复制的，用来占位 -->
<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中动态设置每一个li花费的时间为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%用来在下一次显示时占位 */
transform: translateX(-50%);
}
}
</style>2、单行显示，每行显示多条
效果图
上代码
<template>
<div class="container">
<div class="box">
<!-- 假设lists列表有4个项，设置ul的宽度为400%（相对于box），设置li的宽度为12.5%（相对于ul是12.5%；相对于box是50%），但是li要有8个，其中4个是复制的，用来占位 -->
<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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。