用CSS遮罩实现过渡效果的示例代码

@-webkit-keyframes mask-play { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } } @keyframes mask-play { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }

到这里，我们现在用了具有结构和样式的幻灯片了，接下来是让它更加具有实用性!

The JavaScript

在这个例子中用到了 zepto.js ,它是一个非常轻量级的JavaScript 框架类似于jQuery。

最开始是声明所有的变量，设置持续时间和其他需要的元素。接下来初始化事件，获取当前幻灯片和下一张幻灯片，设置正确的z-index。

function Slider() { // Durations this.durations = { auto: 5000, slide: 1400 }; // DOM this.dom = { wrapper: null, container: null, project: null, current: null, next: null, arrow: null }; // Misc stuff this.length = 0; this.current = 0; this.next = 0; this.isAuto = true; this.working = false; this.dom.wrapper = $('.page-view'); this.dom.project = this.dom.wrapper.find('.project'); this.dom.arrow = this.dom.wrapper.find('.arrow'); this.length = this.dom.project.length; this.init(); this.events(); this.auto = setInterval(this.updateNext.bind(this), this.durations.auto); } /** * Set initial z-indexes & get current project */ Slider.prototype.init = function () { this.dom.project.css('z-index', 10); this.dom.current = $(this.dom.project[this.current]); this.dom.next = $(this.dom.project[this.current + 1]); this.dom.current.css('z-index', 30); this.dom.next.css('z-index', 20); };

监听箭头的点击事件，如果幻灯片现在没有处于动画过程中，检测点击的是上一张还是下一张箭头。如果点击了下一张箭头，更改相关变量的值并开始渐变动画。

/** * Initialize events */ Slider.prototype.events = function () { var self = this; this.dom.arrow.on('click', function () { if (self.working) return; self.processBtn($(this)); }); }; Slider.prototype.processBtn = function (btn) { if (this.isAuto) { this.isAuto = false; clearInterval(this.auto); } if (btn.hasClass('next')) this.updateNext(); if (btn.hasClass('previous')) this.updatePrevious(); }; /** * Update next global index */ Slider.prototype.updateNext = function () { this.next = (this.current + 1) % this.length; this.process(); }; /** * Update next global index */ Slider.prototype.updatePrevious = function () { this.next--; if (this.next < 0) this.next = this.length - 1; this.process(); };

这个函数是这个demo的核心函数，当我们设置当前播放的这张幻灯片的class为hide时，动画一旦结束。将上一张幻灯片的z-index减小，增加当前幻灯片的z-index值，并移除上一张幻灯片的hide class。

/** * Process, calculate and switch between slides */ Slider.prototype.process = function () { var self = this; this.working = true; this.dom.next = $(this.dom.project[this.next]); this.dom.current.css('z-index', 30); self.dom.next.css('z-index', 20); // Hide current this.dom.current.addClass('hide'); setTimeout(function () { self.dom.current.css('z-index', 10); self.dom.next.css('z-index', 30); self.dom.current.removeClass('hide'); self.dom.current = self.dom.next; self.current = self.next; self.working = false; }, this.durations.slide); };

添加相应的class触发动画，进而将遮罩图像应用到幻灯片中。其主要思想是step animation过程中移动遮罩，以创建过渡流。

英文原文：Transition Effect with CSS Masks

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!