html - 怎么用CSS做从左右网页过渡的滑入？

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%);
    }
}

请参阅此插件的工作示例:http://plnkr.co/edit/EUPuHN . (如果你想翻录 CSS 代码，从 plunker 复制它......它有所有供应商前缀)