CSS过渡解决了方向问题

时间:2011-04-14 14:01:16

标签: css3 css-transitions

我对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;
}

任何想法,

非凡

1 个答案:

答案 0 :(得分:1)

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

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