使用mask实现轮播（擦拭视觉）

擦拭轮播视觉

视觉分析：

有一块遮罩从左向右滚动，该遮罩还有左右羽化视觉。擦拭过程中，擦拭部分会变为下一句文案，未到擦拭部分依旧保持当前文案

mask

Mask允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片来实现。

mask-image: 定义设置元素上遮罩层的图像
mask-mode: 指示由 mask-image 指向的遮罩被视为亮度或阿尔法遮罩（未在真实场景使用过）
mask-repeat: 定义了遮罩图片是否重复显示多个副本，以及如何重复
mask-position: 定义遮罩图片位置，与background-position表现一致
mask-clip: 定义mask遮罩区域位置（裁切，表现同background-clip ）
mask-origin: 定义遮罩起始位置（表现同background-origin）
mask-size: 定义遮罩的尺寸
mask-composite: mask合成模式（未在真实场景使用过）
mask: 图片 模式 位置 大小 重复性 影响范围 [裁切范围] 组合操作

mask一个特点，就是有色值的部分可见，透明部分将会被隐藏，如果对mask不太懂的建议百度，相关文章很多，这里不做过多介绍，这里是基于设计稿自行制作的两个mask素材图

进入与离开mask图片

<div class="marquee-wrap" ref="marquee">
    <p :class="['interest', {'enter': !textIndex}, {'leave': textIndex === 1}]"
       v-for="(textItem, textIndex) of item.list"
       :key="textIndex">{{textItem}}</p>
</div>

    .marquee-wrap {
        top: 247px/@p;
        width: 433px/@p;
        height: 72px/@p;
        left: 158px/@p;
        background: url(../img/sub_title_bg.png) no-repeat center;
        /*! autoprefixer: off */
        background-size: contain;
        /*! autoprefixer: on */
    }

    .interest {
        position: absolute;
        .flex(vm);
        .size(100%);
        color: #922b29;
        font-size: 34px;
        font-weight: 700;
        mask-size: 200% 100%;
        mask-position: -100% 0;
        mask-image: url(../img/mask.png);
    }

    .enter {
        animation: enter 1s .3s linear both;
    }

    .leave {
        mask-image: url(../img/mask_l.png);
        animation: leave 1s linear both;
    }

/* 两个动画一样，但是不切换动画名无法再次执行 */
@keyframes enter {
    from {
        mask-position: -100% 0;
    }
    to {
        mask-position: -200% 0;
    }
}

@keyframes leave {
    from {
        mask-position: -100% 0;
    }
    to {
        mask-position: -200% 0;
    }
}

marquee () {
    setTimeout(() => {
        this.childNode[this.marqueeIndex].classList.add('leave');
        this.childNode[this.marqueeIndex].classList.remove('enter');

        if (this.marqueeIndex === this.childNode.length - 1) {
            this.marqueeIndex = 0;
        } else {
            this.marqueeIndex += 1;
        }

        this.childNode[this.marqueeIndex].classList.remove('leave');
        this.childNode[this.marqueeIndex].classList.add('enter');
        this.marquee();
    }, 2000);
}

重点实现代码在上面，说一下思路，进入与离开分别赋予不同的类名，虽然动画方式一致，但是css动画重复添加类名是无法重新执行动画的，所以不能只切换mask的图片，这个实现主要是css实现，所以就不封装成组件了。进入与离开间隔0.3秒时间，而这个时间差也就形成了上面的遮罩块。动画执行1秒，延时两秒，保证利益点可在页面上展示1秒，方便用户看完利益点。

就酱~