SEE MY ANSWER BELOW

我正在使用jQuery使用CSS实现我自己的滑动页面过渡,并且遇到以下问题:

我正在使用addClass方法,它在第一次触发链接以将页面动态加载到div中时起作用。当另一个链接被触发时,页面加载而没有过渡。我认为这是我需要使用removeClass方法,但这可以防止根本不触发转换。我尝试了使用这两个类的各种方法,但是每次链接出现问题时,我都无法使它正常工作。

对我的错/遗漏有任何想法吗?

编辑对于那些不懂CSS子类的人:


  一次可以添加多个类,以空格分隔
  匹配元素的集合,如下所示:


$("p").addClass("myClass yourClass");


Taken from the jQuery Docs

thnx。

/* --------------- Handle Page Body Loading ----------------- */

function loadBody(target, gotoURL)
{
    $('#' + target)
    .addClass('slide out')
    .load(gotoURL, function (response)
    {
        iniScroll('scrollBody', 'bodyScrollContainer');
    })
    .addClass('slide in')
    removeSlideClass();//WITHOUT THIS, IT FIRES ONLY THE FIRST USE!!
};

function removeSlideClass()
{
    $('#bodyContent').removeClass('slide in');
    $('#bodyContent').removeClass('slide out');
};


如果我按下面的方式写代码,则它的工作原理完全相同(jQuery 101);

function loadBody(target, gotoURL)
{
    $('#' + target).addClass('slide out');
    $('#' + target).load(gotoURL, function (response)
    {
        iniScroll('scrollBody', 'bodyScrollContainer');
    });
    $('#' + target).addClass('slide in');
    $('#' + target).removeSlideClass();
};

function removeSlideClass()
{
    $('#bodyContent').removeClass('slide in');
    $('#bodyContent').removeClass('slide out');
};


CSS:

.out, .in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 650ms;
}
.slide.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
}

.slide.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
}

最佳答案

我想到了:

.addClass('slide out')方法与webkitAnimationEnd事件绑定,后跟return语句,当第一个转换完成时,将触发第二个转换。触发此事件时,它将从原始页面中删除所有类。记住取消绑定webkitAnimationEnd事件可以防止在新页面上添加额外的处理程序,以便在需要时可以重新开始该过程。因此,不需要jQuery的removeClass()方法。

新的页面过渡方法。

/* --------------- Handle Page Body Loading ----------------- */

function loadBody(target, gotoURL)
{
    $('#' + target)
    .addClass('slide out')
    .bind('webkitAnimationEnd', function(){
        $(this).load(gotoURL, function (e)
        {
            iniScroll('scrollBody', 'bodyScrollContainer');
            $('#' + target)
            .toggleClass('slide in')
            .unbind('webkitAnimationEnd');
        });
    });
};

07-24 09:43
查看更多