Désactiver le geste de balayage jusqu'à la fin de la transition CSS

Question

J'ai n des boîtes de taille égale dans un récipient absolument positionné de la largeur de Boxwidth * n.Ceci réside dans un récipient relativement positionné avec un débordement caché.Il y a plusieurs rangées.Sur une balayage gauche ou droite, la position horizontale du conteneur de la boîte ajoutera ou soustrayez 1 boîte à partir de la position gauche des récipients dans la direction glissée sans dépasser ses positions max (0, 0) et (((((((((((((((((((((((((((((((((((((((((((((((BoxWidth * N), 0)

http://jsfiddle.net/rte8u/8/

Il s'agit d'une version simple de ce que je suis actuellement en train de rouler, et cela fonctionne toutefois, si deux éruptions sont effectuées avant la fin de la transition CSS, la mauvaise position de «courant» est référencée.Que puis-je faire à ce sujet?

html

<div class="widget a">
    <div class="overflow">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</div>
<div class="widget b">
    <div class="overflow">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>
</div>
<div class="widget c">
    <div class="overflow">
        <div class="box">1</div>
        <div class="box">2</div>
    </div>
</div>
<div class="widget d">
    <div class="overflow">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</div>

CSS

* {
    margin:0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.widget {
    width: 200px;
    position: relative;
    height: 100px;
    overflow: hidden;
}
.overflow {
    transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    height: 100px;
    position:absolute;
    left: 0;
}
.box {
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    float: left;
    text-align:center;
    line-height: 100px;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}
.box:hover{
    cursor:pointer;
}

JS

var fullbox = '200',
    overflows = [$('.a .overflow'),$('.b .overflow'),$('.c .overflow'),$('.d .overflow')];

// Set Widths of Overflow Boxes
for (var i=0; i < 4; i++){
    overflows[i].width(overflows[i].children().length * fullbox);   
}

// Swipe Handlers
$('.overflow').on({
    swipeleft: function () {
        if ($(this).position().left != '-' + ($(this).children().length - 1) * fullbox) {
            $(this).css('left', '-=' + fullbox);
        }
    },
    swiperight: function () {
        if ($(this).position().left !== 0) {
            $(this).css('left', '+=' + fullbox);
        }
    }
});

Answer 1

Vous ne voulez probablement pas arrêter le geste pendant que les cases sont en transition.À partir d'un point de vue d'expérience utilisateur si je glissais deux fois, je m'attends probablement à ce que les cases se déplacent deux fois plus loin.Une méthode que vous pourriez utiliser est au lieu de détecter les positions des boîtes et de déplacer par rapport à la position consiste à maintenir l'onglet d'index de l'utilisateur. Soit garder une piste dans un var ou dans le DOM lui-même:

<div class="overflow" data-index="0">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>

Puis je change les gestes de balayage pour suivre l'index comme tel:

$('.overflow').on({
  swipeleft: function () {
    var currentPosition = parseInt($(this).attr('data-index'));
    var totalBoxes = $(this).children('.box').length - 1;

    // Calculate the next position and ensure it doesn't pass the last box.
    var nextPosition = currentPosition + 1;
    if (nextPosition >= totalBoxes) {
        nextPosition = totalBoxes;
    }

    moveBox($(this), nextPosition);
  },
  swiperight: function () {
    var currentPosition = parseInt($(this).attr('data-index'));

    // Calculate the next position and ensure it doesn't pass the first box.
    var nextPosition = currentPosition - 1;
    if (nextPosition < 0) {
        nextPosition = 0;
    }

    moveBox($(this), nextPosition);
  }
});

La fonction de déménagement:

function moveBox($ele, position) {
    var movePosition = parseInt(fullbox) * position;

    $ele
        .attr('data-index', position)
        .css('left', '-' + movePosition + 'px');
}

http://jsfiddle.net/rte8u/11/