Das Karussellprinzip von Hammer.js implementiert einfache Javascript-Funktionen für Schiebebildschirme

Ich hatte kürzlich die Aufgabe, eine sehr kleine h5-Anwendung mit nur zwei Bildschirmen zu erstellen. Dazu waren horizontale Vollbild-Schiebevorgänge und einige einfache Animationseffekte erforderlich. Ich habe zuvor fullpage.js und jquery verwendet Und die Leistung war nicht sehr gut, deshalb wollte ich selbst eine einfache Sache machen, um sie umzusetzen. Schließlich habe ich zepto hammer.js und carousel verwendet, um dieses Problem zu lösen. Wenn Gzip nicht auf der gesamten Seite aktiviert war, betrug die Datengröße aller Ressourcenanforderungen etwa 200 KB. Dieser Artikel fasst die Implementierungsideen dieser Methode zusammen.

Wirkungsdemonstration:

1. Umsetzungspunkte

1) Der Schiebebildschirm basiert auf dem Karussell-Plug-in von Bootstrap, ist aber nicht so kompliziert wie es ist. Sie müssen nur auf die Ideen zur Karussell-Implementierung zurückgreifen

2) Das Auslösen der Sliding-Screen-Umschaltung unterscheidet sich von dem des PCs und wird normalerweise durch den Klickrückruf des Elements ausgelöst. Bei der Sliding-Screen-Seite kann es also durch das Hashchange-Ereignis des Fensters verarbeitet werden Es wird über den Hyperlink eingestellt. Der Wechsel kann durch Ändern des Ankerpunkts oder des location.hash über js

ausgelöst werden

3) Da Mobilgeräte Gestenoperationen unterstützen müssen, können Sie die Gestenbibliothek hammer.js verwenden. Die API ist sehr einfach und benutzerfreundlich

4) Sie können animate.css für Animationseffekte verwenden, aber Sie müssen nicht den gesamten Code in den Code einfügen. Sie müssen nur den Code kopieren, der sich auf die erforderlichen Animationseffekte bezieht

5) Anstelle von jquery wird zepto bevorzugt;

6) Der Sliding-Screen-Effekt verwendet eine Übergangsanimation. Um auf den Rückruf am Ende der Animation zu reagieren, können Sie die Verwendung von transit.js in Betracht ziehen, das jedoch nur verwendet werden kann Standardmäßig mit jquery. Sie müssen es in Verbindung mit zepto leicht ändern.

Diese Schlüsselpunkte sind relativ grob und werden im folgenden Inhalt einzeln vorgestellt.

2. HTML-Struktur

Die HTML-Struktur der leeren Schiebeseite ist wie folgt:

html,

<div id="container" class="container">
<section id="page-1" class="page page--1">
</section>
<section id="page-2" class="page page--2">
</section>
<section id="page-3" class="page page--3">
</section>
</div>

.container und .page übernehmen bei der Initialisierung die absolute Positionierung und das Vollbild-Layout. Jede Abschnittsseite stellt eine Seite dar und wird standardmäßig nicht angezeigt. Alle Seiten sind gleich positioniert, was bedeutet, dass sich diese Seiten überlappen, wenn alle Seiten angezeigt werden.

body {
height: 100%;
-webkit-tap-highlight-color: transparent;
}
.container,
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.page {
overflow: hidden;
display: none;
-webkit-transition: -webkit-transform .4s ease;
transition: transform .4s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

Die HTML-Struktur der Demoseite ist:

Demobezogenes CSS wird nicht angezeigt. Unter anderem ist animiert erforderlich, um animate.css anzuwenden, eine Animationsbibliothek, die auf Github verfügbar ist.

<div id="container" class="container">
<section id="page-1" class="page page--1">
<div class="page__jump"><a href="#page-2" title="">下一页</a></div>
<p class="page__num animated">1</p>
</section>
<section id="page-2" class="page page--2">
<div class="page__jump"><a href="#page-1" title="">上一页</a><a href="#page-3" title="">下一页</a></div>
<p class="page__num animated">2</p>
</section>
<section id="page-3" class="page page--3">
<div class="page__jump"><a href="#page-2" title="">上一页</a></div>
<p class="page__num animated">3</p>
</section>
</div>

3. Umsetzungsideen der Schiebebildschirmumschaltung

Das Umschalten des gleitenden Bildschirms wird erreicht, indem die beiden zu verschiebenden Seiten über js gesteuert werden, um die unten definierten CSS-Klassen hinzuzufügen und zu löschen:

.page--active gibt die aktuell angezeigte Seite an. Nachdem die Seite initialisiert wurde, verwenden Sie den folgenden js-Aufruf, um .page--active:

zur ersten Seite hinzuzufügen.

.page.page--active,
.page.page--prev,
.page.page--next {
display: block;
}
.page.page--next,
.page.page--active.page--active-right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.page.page--prev,
.page.page--active.page--active-left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.page.page--next.page--next-left,
.page.page--prev.page--prev-right,
.page.page--active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

这样页面默认就显示了第一页。以向左滑屏说明这些css的使用原理：

第一步，找到下一页的section，添加page--next类，将它定位当前页的右边，为滑屏做准备；

第二步，找到当前页的section，给它添加page--active-left，由于这个类改变了translate3D属性的值，所以当前页会往左滑动一屏；

在第二步的同时，给下一页的section，添加page--next-left，由于这个类改变了translate3D属性的值，所以下一页会往左滑动一屏；

第三步，在当前页跟下一页滑屏动画结束后，找到原来的当前页，移除掉page--active和page--active-left类；

在第三步的同时，找到下一页，移除掉page--next和page--next-left类，添加page--active。

gif图说明如下：

向右滑屏原理类似：

第一步，找到上一页的section，添加page--prev类，将它定位当前页的左边，为滑屏做准备；

第二步，找到当前页的section，给它添加page--active-right，由于这个类改变了translate3D属性的值，所以当前页会往右滑动一屏；

在第二步的同时，给上一页的section，添加page--prev-right，由于这个类改变了translate3D属性的值，所以上一页会往右滑动一屏；

第三步，在当前页跟上一页滑屏动画结束后，找到原来的当前页，移除掉page--active和page--active-right类；

在第三步的同时，找到上一页，移除掉page--prev和page--prev-right类，添加page--active。

综合以上实现原理，封装成JS函数如下：

var TRANSITION_DURATION = 400, sliding = false; function getSlideType($targetPage) {
var activePageId = $activePage.attr('id'),
targetPageId = $targetPage.attr('id');
return activePageId < targetPageId &#63; 'next' : activePageId == targetPageId &#63; '' : 'prev';
}
function slide(targetPageId) {
var $targetPage = $('#' + targetPageId);
if (!$targetPage.length || sliding) return;
var slideType = getSlideType($targetPage),
direction = slideType == 'next' &#63; 'left' : 'right';
if (slideType == '') return;
sliding = true;
$targetPage.addClass('page--' + slideType);
$targetPage[0].offsetWidth;
$activePage.addClass('page--active-' + direction);
$targetPage.addClass('page--' + slideType + '-' + direction);
$activePage
.one($.transitionEnd.end, function () {
$targetPage.removeClass(['page--' + slideType, 'page--' + slideType + '-' + direction].join(' ')).addClass('page--active');
$activePage.removeClass(['page--active', 'page--active-' + direction].join(' '));
$activePage = $targetPage;
sliding = false;
})
.emulateTransitionEnd(TRANSITION_DURATION);
}

由于$activePage在页面初始化的时候默认指定为第一页，在每次滑屏结束后都会更新成最新的当前页，所以调用的时候只要把目标页的ID传给slide函数即可。以上代码可能会有疑问的是：

1）$targetPage[0].offsetWidth的作用，这个代码用来触发浏览器的重绘，因为目标页原来是display: none的，如果不触发重绘的话，下一步添加css类后将看不到动画效果；

2）$.transitionEnd.end以及emulateTransitionEnd的作用，这个在下一部分说明。

4. 浏览器css动画结束的回调及模拟

bootstrap提供了一个工具，transition.js，用来判断浏览器是否支持css动画回调事件，以及在浏览器没有在动画结束后自动触发回调的特殊情况下通过模拟的方式来手动触发回调，原先这个工具只能配合jquery使用，为了在zepto中使用，必须稍微改变一下，下面就是改变之后的代码：

(function(){
var transition = $.transitionEnd = {
end: (function () {
var el = document.createElement('transitionEnd'),
transEndEventNames = {
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend'
};
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return transEndEventNames[name];
}
}
return false;
})()
};
$.fn.emulateTransitionEnd = function (duration) {
var called = false,
_this = this,
callback = function () {
if (!called) $(_this).trigger(transition.end);
};
$(this).one(transition.end, function () {
called = true;
});
setTimeout(callback, duration);
return this;
};
})();

$.transitionEnd.end表示当前浏览器支持的动画结束事件的名称。$.fn.emulateTransitionEnd是一个扩展了Zepto原型的一个方法，传入一个动画的过渡时间，当这个时间段过完之后，如果浏览器没有自动触发回调事件，called就始终是false，setTimeout会导致callback被调用，然后callback内部就会手动触发动画结束的回调。为什么要通过这个方式来模拟动画结束，是因为浏览器即使支持动画结束事件的回调，但是有些时候并不会触发这个事件，或者在动画结束后不能立即触发，影响回调的准确性。传入的duration应该与执行动画的元素，在css上设置的transtion-duration相同，注意以下代码中标黄的部分：

var TRANSITION_DURATION = 400 ;
$activePage
.one($.transitionEnd.end, function () {
$targetPage.removeClass(['page--' + slideType, 'page--' + slideType + '-' + direction].join(' ')).addClass('page--active');
$activePage.removeClass(['page--active', 'page--active-' + direction].join(' '));
$activePage = $targetPage;
sliding = false;
})
.emulateTransitionEnd(TRANSITION_DURATION); 
.page {
overflow: hidden;
display: none;
-webkit-transition: -webkit-transform .4s ease;
transition: transform .4s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

5. hashchange事件

PC端滑屏都是给元素添加点击事件触发的，移动端可以利用window的hashchange事件：

$(window).on('hashchange', function (e) {
var hash = location.hash;
if (!hash) hash = '#page-1';
slide(hash.substring(1));
});
location.hash = '#page-1';

hashchange事件，在js代码中通过改变loaction.hash或者是点击2fc8db3327435aa54ad74d366b04c0cb下一页5db79b134e9f6b82c0b36e0489ee08ed这样的超链接时，都会触发，所以只要在这个事件的回调去做滑屏切换即可。这样那些上一页和下一页的链接元素都不用加事件了。

6. hammer.js使用简介

hammer.js是一个手势库，支持常用的手势操作，使用简单，引入它的js之后，通过以下的方式来支持手势滑屏：

//初始化手势滑动
var container = document.getElementById('container'),
mc = new Hammer.Manager(container),
Swipe = new Hammer.Swipe();
mc.add(Swipe);
mc.on('swipeleft', function (e) {
swipteTo('next', e);
});
mc.on('swiperight', function (e) {
swipteTo('prev', e);
});
function swipteTo(slideType, e) {
var $targetPage = $activePage[slideType]('.page');
$targetPage.length && (location.hash = '#' + $targetPage.attr('id'));
}

Verwenden Sie das gesamte Containerelement als Schiebebühne. Wenn das Swipe-Right-Ereignis ertönt, bedeutet dies, dass die Seite nach links verschoben wird. Wenn das Swipe-Right-Ereignis hörbar ist, sollte die Seite angezeigt werden Die Seite wird nach rechts verschoben und die Seite sollte die nächste Seite anzeigen.

7. Fazit

Die Verwendung von animate.css wird nicht im Detail vorgestellt. Dies ist die Github-Adresse: https://github.com/daneden/animate.css einfach zu bedienen. In diesem Artikel werden einige aktuelle Arbeitserfahrungen aufgeführt, die manchmal nicht vollständig in Worten erklärt werden können. Daher kann ich mein Bestes geben, um einige Probleme etwas ausführlicher zu erläutern. Wenn Sie Fragen haben? Erklären Sie mir diese im Kommentarbereich und ich werde sie sorgfältig prüfen. Außerdem bin ich mit dem mobilen Endgerät nicht sehr vertraut. Wenn Sie bessere Einblicke haben, können Sie diese gerne mit uns teilen. Vielen Dank fürs Lesen und bald ist Neujahr. Ich wünsche Ihnen viel Glück im Jahr des Affen!