2

在下面查看我的答案

我正在使用 jQuery 使用 CSS 实现我自己的滑动页面转换，并遇到以下问题：

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

知道我有什么错误/遗漏吗？

编辑对于那些不理解 CSS 子类的人：

一次可以将多个类添加到匹配元素的集合中，用空格分隔，如下所示：

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

取自 jQuery 文档

谢谢。

/* --------------- 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;
}
4

2 回答 2

0

我想到了：

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

新的页面转换方法。

/* --------------- 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');
        });
    });
};
于 2012-04-26T15:54:36.080 回答
-1

CSS 类不应包含任何空格...

IE：

slide out，应该是slide-out，或者slide_out或者slideOut

尝试删除空格并修复 css 中的类以匹配。

于 2012-04-26T01:26:44.497 回答