Question

我使用类似于此（下图）的CSS创建了从右侧和左侧滑入的页面过渡。我从MDN CSS Animations得到了这个想法。

/* -webkit-, -moz-, -o- vendor prefixes omitted for brevity.
    See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
    */
.slidein-from-right {
    animation: slidein-from-right 500ms;
}
@keyframes slidein-from-right {
    from {
        margin-left: 100%;
        width: 300%;
        opacity: 0;
    }
    to {
        margin-left: 0%;
        width: 100%;
        opacity: 1;
    }
}
.slidein-from-left {
    animation: slidein-from-left 500ms;
}
@keyframes slidein-from-left {
    from {
        margin-right: 100%;
        width: 300%;
        opacity: 0;
    }
    to {
        margin-right: 0%;
        width: 100%;
        opacity: 1;
    }
}

这适用于从右侧滑入的页面。但是，从左侧滑入不起作用（因为包含div是向左浮动）。我尝试了从右侧滑入的绝对定位和其他东西，并从左页过渡滑入，但总有一些错误。例如，向右浮动会导致元素偏离右侧。使用其他选项，我无法使页面居中，边距和填充正确。

最好的方法是什么？支持现代浏览器很好。

Answer 1

您可以使用jquery移动页面转换，这很棒。

或者你可以使用像这样的CSS转换。不要弄乱页面的设计布局。只是改变它！请注意，在撰写本文时，CSS transforms是实验性的，但在最近的浏览器（FF29，Chrome 35和IE11）中测试得很好。

/* -webkit-, -moz-, -o- vendor prefixes omitted for brevity.
    See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
    */
.slidein-from-right {
    -webkit-animation: slidein-from-right2 500ms;
}
@-webkit-keyframes slidein-from-right2 {
    from {
        opacity: 0;
        -webkit-transform:translateX(100%);
    }
    to {
        opacity: 1;
        -webkit-transform:translateX(0%);
    }
}

请参阅此plunker的工作示例：http://plnkr.co/edit/EUPuHN。 （如果你想破解CSS代码，从plunker复制它......它有所有的供应商前缀）

如何使用CSS从左右网页过渡滑入？

1 个答案: