jquery - jQuery スライド効果を CSS3 トランジションに置き換える

Question

jQuery (UI) スライド効果を CSS3 トランジション効果に置き換えようとしています。ハンドヘルド デバイスでよりスムーズに見えるからです。

スワイプイベントに応じて要素を左また​​は右にスライドさせ、その内容を変更してから、反対側から再度スライドさせています。

古い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();
            }
        });
    };

うまくアニメーション化されますが、ビューポートから移動した後、要素を反対側に「テレポート」してから、コンテンツを変更してから再び中央に移動します。それに素敵なスライドショー効果を与えます。

それ、どうやったら出来るの？

また、ここでハッキングしているような気がします。コードを今よりもきれいにするにはどうすればよいですか?

もしそうなら、より良いアプローチは何ですか？