css - 解决方向问题的 CSS 过渡

Question

我对 CSS 过渡的第一次尝试是使用类似于 iOS 的滑动面板系统。所有工作，但面板从左侧滑出并从左侧滑入。我在使用 iOS 样式的滑块，其中一个面板向左滑出，另一个面板从右侧滑入，如果一个面板向后滑动，则会发生相反的情况。

#container{    
    position: relative;
    overflow: hidden;
    width: 250px;
}

.panel{
    position: absolute;    
    overflow: hidden;
    top: 0;
    left: 250px;
    width: 250px;
    max-height: 0;
    -webkit-transition: left .25s linear, max-height .25s linear;
    -moz-transition: left .25s linear, max-height .25s linear;
    -o-transition: left .25s linear, max-height .25s linear;
    transition: left .25s linear, max-height .25s linear;
    display:block;
}

.panel:target{
    left: 0px;
    max-height: 9999px;
    position: relative;
}

有任何想法吗，

奇妙

Answer 1

看看http://css3.bradshawenterprises.com/sliding/。

我会将各种面板排成一行，然后在它们之间滑动，如上面的链接所示。