CSS转换未在下一个之前完成？

Question

小提琴：http://jsfiddle.net/wczTW/1/

基本上，我有一组我正在上下移动的元素。想想除了垂直之外的“封面流”（Yuck，我知道）。它的效果非常好，除非你快速上升或下降，在这种情况下，似乎CSS转换在最后一个完成之前开始并且它们开始变得太近。我甚至不能100％确定这是怎么回事，但是如果你用上面的小提琴演奏几秒钟，你应该看看我在说什么。

相关CSS：

        .game {
            position: absolute;
            width: 150px;
            height: 100px;
            left: 200px;
            margin-left: -125px;
            background-color: gray;
            border: 1px solid white;
            -webkit-transition: all .2s ease-in-out;
            -webkit-transform: scale(1);
            overflow: hidden;
            z-index: 10;
        }

        .selected {
            transform-origin: 0 0;
            border: 1px solid green;
            -webkit-transition: all .2s ease-in-out;
            -webkit-transform: scale(1.25);
            z-index: 100;
        }

相关的Javascript：

        $(document).ready(function () {
            keyDown = false;
            lTop = ($(window).height() / 2) - 50;


            $('.game').each(function () {
                $(this).css('top', lTop);
                lTop += 120;
            });
        });


        $(document).keydown(function (e) {
            if (!keyDown) {
                if (e.keyCode == 40) { //down
                    var selected = $('.selected');
                    var next = selected.next()
                    if (next.length) {
                        selected.removeClass('selected');
                        next.addClass('selected');
                        $('.game').css('top', function (i, v) {
                            return (parseFloat(v) - 120) + 'px';
                        });
                    }
                    keyDown = true;
                } else if (e.keyCode == 38) { //up
                    var selected = $('.selected');
                    var next = selected.prev()
                    if (next.length) {
                        selected.removeClass('selected');
                        next.addClass('selected');
                        $('.game').css('top', function (i, v) {
                            return (parseFloat(v) + 120) + 'px';
                        });
                    }
                    keyDown = true;
                }
            }
        });

        $(document).keyup(function (e) {
            keyDown = false;
        });

是否有一种简单的方法来排队CSS转换？或阻止输入直到当前转换完成？

编辑：我认为如果可能的话，我宁愿只是中止动画并立即移动它。上面两个选项我认为是糟糕的用户体验。

Answer 1

发生的事情是，在top CSS值更新为新值之前发生了按键，因此v变量不是您所期望的。修复的一种方法是使用setTimeout()来阻止按键直到动画完成，但更好的方法是使用另一种方法来计算top值。我为你拼凑了一个小提琴。

FIDDLE HERE http://jsfiddle.net/wczTW/2/

这是您的新javascript：

        var currentTop, lTop, keyDown;

        $(document).ready(function () {
            keyDown = false;
            currentTop = lTop = ($(window).height() / 2) - 50;
                            console.log(lTop);


            $('.game').each(function () {
                $(this).css('top', lTop);
                lTop += 120;
            });
        });

        var index = 0;
        $(document).keydown(function (e) {
            var selected = $('.selected');
            if (!keyDown) {
                if (e.keyCode == 40) { //down
                    var next = selected.next()
                    if (next.length) {
                        index++;
                        selected.removeClass('selected');
                        next.addClass('selected');

                        $('.game').css('top', function (i, v) {
                            return ((i * 120) - (index * 120) + currentTop) + 'px';
                        });
                    }
                    keyDown = true;
                } else if (e.keyCode == 38) { //up
                    var next = selected.prev()
                    if (next.length) {
                        index--;
                        selected.removeClass('selected');
                        next.addClass('selected');
                        $('.game').css('top', function (i, v) {
                            return ((i * 120) - (index * 120) + currentTop) + 'px';
                        });
                    }
                    keyDown = true;
                }
            }
        });

        $(document).keyup(function (e) {
            keyDown = false;
        });

所以我改变的是：

1. 添加了一个新变量currentTop，这是我们始终希望.selected项目所在的值
2. 更改了$('.game').css()以便它不会使用v来计算新的顶部，它现在根据i变量（它是该变量的索引）来计算它item）和新的index变量
3. 添加了index变量，用于跟踪当前选择的索引。这可以在按键上使用index++和index--。