v-for="(item, index) in list"
:class="['scroll-item']"
:key="index"
>
恭喜{{item.mobile}} 抽中 {{item.prizeName}}
...
.scroll-wrapper {
position: absolute;
white-space: nowrap;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
&.play{
animation: scroll 30s linear infinite;
}
&.play2{
animation: scroll2 30s linear infinite;
}
}
...
@keyframes scroll {
0% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
}
/* to fix bug: after login, animation problem */
@keyframes scroll2 {
0% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
}
复制代码