本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下:
先看实现效果:
这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的。
Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果
// template
v-for="v in items"
:key="v.ix"
class="item list-complete-item pro-panel"
:style="{ height: sh }"
>
// 内容部分
//scss
.list-complete-item {
transition: all 1s;
}
.list-complete-leave-to {
opacity: 0;
transform: translateY(-80px);
}
.list-complete-leave-active {
position: absolute;
}
这样,动画效果就出来了,但是却不能自动执行,所以我利用了setInterval:
mounted() {
let count = 4000