css - CSS 过渡没有在下一个之前完成？

Question

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

基本上，我有一组要上下移动的元素。想想“Cover Flow”，除了垂直（糟糕，我知道）。它工作得很好，除非你非常快速地向上或向下，在这种情况下，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

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

在这里提琴 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变量（即该项目的索引）和新index变量来计算它
3. 添加了index变量，用于跟踪当前选择的索引。这可以使用index++和index--按键。