Vue实现文字向上滚动

Vue 实现文字向上滚动

先看下效果图（不会插动态的，静态的将就看吧）：

下面直接上代码：
HTML部分(当数组长度小于6时，正常显示，长度大于等于6时，滚动显示)：

<div :class="arr.length >= 6?'inner-container':'flowText'" >
   <p class="text" v-for="(text,index) in arr" :key="index">{{text}}</p>
</div>
1
2
3

CSS部分：

.inner-container {
    animation: myMove 8s linear infinite;  //规定滚动时长为8s
    animation-fill-mode: forwards;
    font-size: 15px;
    color: #333;
    line-height: 35px;
}
.flowText {
    font-size: 15px;
    color: #333;
    line-height: 35px;
}

@keyframes myMove {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-150px);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21