Question

我正在尝试在移动应用中复制滑动转换。我的主要div上有几个“页面”。

如果我想要一个页面在视图中，我只需将其顶部设置为0.如果我想使其无效，我将它的顶部设置为9999px。

这很好用。现在我想添加一些动画来增加它的味道。这就是它到目前为止的样子。所有页面都有类.page

.page {
    position: absolute;
    top: 9999px;
    left: 0;
    right: 0;   
}

.active {
    top: 0;
    left: 0;
    bottom: 0;
    right:0; 
    z-index: 50;
}

当我想移动到某个页面时，我将该类添加到其中并删除任何其他具有非活动类的页面。有用。

我还为它添加了.6s的转换，以便它变为：

.page {
    position: absolute;
    top: 9999px;
    left: 0;
    right: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

我可以看到效果。但是，有两种效果发生。

当我不想要一个页面时，我会删除它中的活动类。我也可以看到那个我不想要的页面。
然后另一页向上滑动，这很好。

如何删除第一个效果？

Answer 1

正如你在这个小提琴中看到的那样：http://jsfiddle.net/UnNbv/（下面转载的代码），如果你只将转换持续时间放在活动页面上，你将获得你想要的效果。

小提琴的例子（悬停时动画，鼠标跳出）：

.test {
    position: relative;
    width:100px;
    height:100px;
    background:#FF0000;
}

.test:hover {
    top:10px;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

要将其应用于您的情况，只需将转换应用于.active类而不是.page类。

为了获得相反的效果（动画但不在其中），您可以使用.page:not(.active)（支持转换的所有内容都支持:not伪类）

编辑：

如果您希望将新页面滑过旧页面的顶部，step-end是您的朋友（我经常想知道它可以提供什么用途;现在我知道了！）。具体来说，代码如下：

.page {
    position:absolute;
    -webkit-transition: top .6s ease-in-out;
    -moz-transition: top .6s ease-in-out;
    -o-transition: top .6s ease-in-out;
    -ms-transition: top .6s ease-in-out;
    transition: top .6s ease-in-out;
}
.page.active {
    top:0;
    z-index:1;
}
.page:not(.active) {
    top:100%;
    -webkit-transition-timing-function: step-end;
    -moz-transition-timing-function: step-end;
    -o-transition-timing-function: step-end;
    -ms-transition-timing-function: step-end;
    transition-timing-function: step-end;
}

（示例小提琴：http://jsfiddle.net/NN9b5/）

Answer 2

向下滑动并向上滑动是因为转换始终适用于这两种状态。

使转换仅适用于单个状态或CSS类有点棘手，因为删除类的性质，如果它包含转换效果和导致更改的属性很容易遇到问题

对于@Dave中的悬停示例，这有点简单，因为悬停不是元素的初始状态，它可以包含过渡。

这里有一些代码将这一切分开，让你有更多的控制权，但诚然可能还有很长的路要走......

http://jsfiddle.net/WjRAD/

    function switchPages() {
    var pageToMakeInactive = $(".page.active"),
        pageToMakeActive = $(".page.inactive"),
        transitionEndEvent = 
            "transitionend " + 
            "webkitTransitionEnd " + 
            "oTransitionEnd " + 
            "otransitionend ";

    pageToMakeActive
        .addClass("active")
        .removeClass("inactive")
        .one(transitionEndEvent, function(){
            // we only want to remove the transtionable
            // behaviour once the transition has ended
            $(this).removeClass("transitionable");
        });

   pageToMakeInactive
       .addClass("inactive")
       .removeClass("active");

    // must add the transition effects on a different
    // call otherwise they will be applied alongside
    // the position changes and this page will slide down
    setTimeout(function() {
        pageToMakeInactive.addClass("transitionable");
    }, 0)
}

向上滑动过渡

2 个答案: