Vue过渡transition实现轮播组件

àì夳堔傛蜴生んèń 2022-05-13 16:40 383阅读 0赞

轮播组件的使用非常广泛，与前写的swiper不同，这个组件实现的是自动轮播的功能。先上效果图：

纵向滚动的轮播一般适用于一些信息的滚动展示

![70][]

横向滚动的轮播一般适用于banner图的变换

![70 1][]

这种组件写起来也其实也不算复杂，但是用Vue的transition组件会更加简单。

**1、Vue过渡组件transition**

简单介绍一下Vue的过渡组件transition，更详细的请看[文档][Link 1]。

Vue 提供了 transition 的封装组件，可以在条件渲染（v-if）和条件展示（v-show）时，为任何元素和组件添加进入/离开的过渡效果。**列表的过渡使用transition-group组件**，使用**tag属性**来指定呈现的元素。

**过渡的类名**

在进入/离开的过渡中，会有 6 个 class 切换：v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to。通过为<transition>添加name属性，可以实现自定义的类名。

![70 2][]

**JavaScript钩子**

**2、轮播的代码实现**

使用<transition-group>并指定tag="ul"来渲染列表，<li>元素中使用currentIndex === index来判断元素是否展示。<img-scroll-item>组件是轮播的内容，这个例子中就是一张图片。

监测after-leave事件，在元素离开后改变currentIndex的值，来展示下一个元素。

autoPlay() {
        setTimeout(() => {
            this.currentIndex++;
            if (this.currentIndex > this.list.length - 1) {
                this.currentIndex = 0;
            }
        }, 2000);
    },

进入时，元素的偏移从100%过渡到0，离开时，从0过渡到-100%，横向滚动使用translateX，纵向滚动则translateY。

.acs_img-scroll{
        height: 100%;
        overflow: hidden;
        .ac_scroll-ul{
            position: relative;
            .ac_scroll-item {
                position: absolute;
            }
            .list-enter-to {
                transition: all 2s ease;
                transform: translateX(0);
            }
            .list-leave-active {
                transition: all 2s ease;
                transform: translateX(-100%)
            }
            .list-enter {
                transform: translateX(100%)
            }
            .list-leave {
                transform: translateX(0)
            }
        }
    }

以上就是全部代码了，非常简单就实现了轮播效果。

[70]: /images/20220504/2ed56f5e3c6d4e8e88bae843fe6f7e54.png
[70 1]: /images/20220504/36f1ae08746a4913a115d6ab6071beab.png
[Link 1]: https://cn.vuejs.org/v2/guide/transitions.html
[70 2]: /images/20220504/786b83f900cc4a13adb2aade0beb753f.png