0

我正在尝试在移动应用程序中复制向上滑动的过渡。我有几个“页面”绝对位于我的主 div 上。

如果我想让一个页面可见，我只需将其顶部设置为 0。如果我想让它处于非活动状态，我将其顶部设置为 9999 像素。

这工作得很好。现在我想添加一些动画来增加一点趣味。这是到目前为止的样子。所有页面都有类 .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;
}

我可以看到效果。但是，会发生两种影响。

  1. 当我不想要一个页面时，我会从中删除活动的类。我还可以看到我不想要的那个页面正在下降。
  2. 然后另一页向上滑动，这很好。

如何删除第一个效果？

4

2 回答 2

0

正如你在这个小提琴中看到的：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/）

于 2013-09-25T17:01:40.857 回答
0

向下滑动和向上滑动正在发生，因为过渡始终适用于两种状态。

将转换仅应用于单个状态或 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)
}
于 2013-09-25T18:12:15.813 回答