Question

我正在尝试用CSS3过渡效果替换我的jQuery（UI）幻灯片效果，因为它在手持设备上看起来更流畅。

我向左或向右滑动一个元素，具体取决于滑动事件，改变其内容，然后再从另一侧滑入。

旧JS

    var handleSwipeEvents = function() {
        $(function() {
            $('#myId').on('swipeleft', swipeHandler);
            $('#myId').on('swiperight', swipeHandler);
            function swipeHandler(event) {
                function slideEffect(swipeLeft, duration) {
                    var slideOutOptions = {"direction" : swipeLeft ? "left": "right", "mode" : "hide"};
                    $('#myId').effect("slide", slideOutOptions, duration, function() { // slide out old data
                        var slideInOptions = {"direction" : swipeLeft ? "right" : "left", "mode" : "show"};
                        $('#myId').effect("slide", slideInOptions, duration); // slide in new data
                        // Alter contents of element
                    });
                }
                var swipeLeft = (event.type === "swipeleft");
                slideEffect(swipeLeft, 300);
            }
        });
    };

我只用了一半的CSS和新的JS。这就是我所拥有的：

CSS

#myId {
    position: relative;
    padding: 0 10% 0 10%;
    transition: all 2s;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
}

.slide_left {
    position: absolute;
    transform: translate3D(-480px, 0, 0);
    -webkit-transform: translate3D(-480px, 0, 0);
    -moz-transform: translate3D(-480px, 0, 0);
}

.slide_right {
    position: absolute;
    transform: translate3D(480px, 0, 0);
    -webkit-transform: translate3D(480px, 0, 0);
    -moz-transform: translate3D(480px, 0, 0);
}

新JS

    var handleSwipeEvents = function() {
        $(function() {
            $('#myId').on('swipeleft', swipeHandler);
            $('#myId').on('swiperight', swipeHandler);
            function swipeHandler(event) {
                var swipeLeft = (event.type === "swipeleft");
                function slideOut() {
                    $('#myId').addClass(swipeLeft ? 'slide_left' : 'slide_right');
                }

                function slideIn() {
                    setTimeout(function() {
                        $('#myId').removeClass('slide_left slide_right');
                    }, 300);
                }

                slideOut(); // It should teleport after the animation is done
                // Alter contents here?
                slideIn();
            }
        });
    };

它很好地动画，但是当它移出视口之后我希望元素“传送”到另一侧，然后我改变它的'内容然后再将它移动到中心。给它一个很好的幻灯片效果。

我该怎么做？

另外，我觉得我在这里乱砍，如何使代码比现在更漂亮？

我是否会犯这种错误，如果是这样，那么更好的做法是什么？

Answer 1

我设法找到了一个有效的解决方案。我不确定这是否是一种“好”的方式，但它确实有效。我也不确定它是否比我的jQuery解决方案更好。感觉就像一个黑客，所以我将继续使用我的jQuery解决方案。但是为了将来的参考，我会在这里留下这个答案。

<强> CSS

#myId{
    position: relative;
    padding: 0 10% 0 10%;
}

.animate {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.outside_left {
    left: -960px;
}

.outside_right {
    left: 960px;
}

.slide_out_left {
    position: absolute;
    -webkit-transform: translate3D(-480px, 0, 0);
    -moz-transform: translate3D(-480px, 0, 0);
    transform: translate3D(-480px, 0, 0);
}

.slide_out_right {
    position: absolute;
    -webkit-transform: translate3D(480px, 0, 0);
    -moz-transform: translate3D(480px, 0, 0);
    transform: translate3D(480px, 0, 0);
}

.slide_in_left {
    position: absolute;
    -webkit-transform: translate3D(-960px, 0, 0);
    -moz-transform: translate3D(-960px, 0, 0);
    transform: translate3D(-960px, 0, 0);
}

.slide_in_right {
    position: absolute;
    -webkit-transform: translate3D(960px, 0, 0);
    -moz-transform: translate3D(960px, 0, 0);
    transform: translate3D(960px, 0, 0);
}

<强> JS

var handleSwipeEvents = function() {
    $(function() {
        $('#myId').on('swipeleft', swipeHandler);
        $('#myId').on('swiperight', swipeHandler);

        function swipeHandler(event) {
            var swipeLeft = (event.type === "swipeleft");
            var duration = 300; // Each CSS animation requires <duration> ms before it's done

            $('#myId').addClass("animate");
            $('#myId').addClass(swipeLeft ? 'slide_out_left' : 'slide_out_right'); // slide out

            setTimeout(function() {
                $('#myId').removeClass("animate slide_out_left slide_out_right");
                $('#myId').addClass(swipeLeft ? "outside_right" : "outside_left"); // "Teleport" to opposite side
                updateDate(swipeLeft ? getNextDate(currentDate) : getPreviousDate(currentDate));
            }, duration);

            setTimeout(function() {
                $('#myId').addClass("animate");
                $('#myId').addClass(swipeLeft ? "slide_in_left" : "slide_in_right"); // slide in
            }, 1.05 * duration);

            setTimeout(function() {
                $('#myId').removeClass("animate slide_in_left slide_in_right outside_left outside_right");
            }, 2 * duration);
        }
    });
};

用CSS3过渡替换jQuery幻灯片效果

1 个答案: