0

我正在尝试用 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();
            }
        });
    };

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

我怎么做？

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

我在这一切都错了，如果是这样，更好的方法是什么？

4

1 回答 1

0

我设法找到了一个可行的解决方案。我不确定这是否是一种“好”的方法，但它确实有效。我也不确定它是否比我的 jQuery 解决方案更好。感觉就像是 hack，所以我将继续使用我的 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);
        }
    });
};
于 2013-06-17T13:20:51.367 回答