先看效果图:
下面看实现步骤:
- 定义数据
data() {
return {
mallData: {
rankingCopy: [],
nowRankingIndex:-1
},
timer:null,
};
},
- html代码
<div
v-for="(item, index) in mallData.rankingCopy"
:key="index"
:class="{
animate__fadeInRight: mallData.nowRankingIndex === -1,
animate__pulse: mallData.nowRankingIndex === index,
}"
class="rankingItem animate__animated"
@mouseover="mallData.nowRankingIndex = index"
>
- 轮播样式和未轮播样式
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
:root {
--animate-duration: 1s;
--animate-delay: 1s;
--animate-repeat: 1;
}
.animate__animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-duration: var(--animate-duration);
animation-duration: var(--animate-duration);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@media print, (prefers-reduced-motion: reduce) {
.animate__animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
.animate__animated[class*='Out'] {
opacity: 0;
}
}
.rankingItem {
background: linear-gradient(
90deg,
rgba(17, 181, 253, 0) 0%,
rgba(17, 181, 253, 0.1) 50%,
rgba(17, 181, 253, 0) 100%
);
height: 48px;
border-bottom: 1px solid;
border-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
#578aef 50%,
rgba(0, 0, 0, 0) 100%
)
1;
text-align: left;
line-height: 48px;
.index {
display: inline-block;
background: url("@/assets/img/dashboard/feedback/ranking_04.png")
no-repeat center;
background-size: 100% 100%;
width: 30px;
height: 30px;
font-size: 16px;
font-family: PangMenZhengDao, serif;
font-weight: 400;
font-style: italic;
color: #ffffff;
letter-spacing: 1px;
padding-right: 2px;
text-align: center;
line-height: 30px;
}
.box {
display: inline-flex;
align-items: center;
vertical-align: center;
width: calc(100% - 35px);
span:first-child {
font-size: 14px;
font-family: Microsoft YaHei, serif;
font-weight: 600;
color: #ade8ff;
line-height: 20px;
text-align: left;
padding-left: 13px;
}
}
&:first-child {
border-top: 1px solid;
.index {
background: url("@/assets/img/dashboard/feedback/ranking_01.png")
no-repeat center;
}
span:nth-child(3) {
color: #eea212;
}
}
&:nth-child(2) {
.index {
background: url("@/assets/img/dashboard/feedback/ranking_02.png")
no-repeat center;
}
span:nth-child(3) {
color: #3197ff;
}
}
&:nth-child(3) {
.index {
background: url("@/assets/img/dashboard/feedback/ranking_03.png")
no-repeat center;
}
span:nth-child(3) {
color: #18f0d9;
}
}
div:nth-child(2) {
span:last-child {
font-size: 14px;
font-family: Microsoft YaHei, serif;
font-weight: 400;
color: #ade8ff;
line-height: 20px;
padding-left: 30px;
}
}
}
为了效果好看,样式真的太多了
- 定时器
mounted() {
this.timer = setInterval(() => {
if(this.mallData.nowRankingIndex<this.mallData.rankingCopy.length-1) {
this.mallData.nowRankingIndex++;
} else {
this.mallData.nowRankingIndex = 0;
}
}, 2000);
},
beforeUnmount() {
clearInterval(this.timer);
},