CSS переходы, решающие проблему направления - PullRequest
Новая
       7

CSS переходы, решающие проблему направления

1 голос
/ 14 апреля 2011

Моя первая попытка 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;
}

Любые идеи,

Marvelous

1 Ответ

1 голос
/ 06 мая 2011

Посмотрите на http://css3.bradshawenterprises.com/sliding/.

Я бы сделал различные панели в линии, а затем скользил между ними, как показано на ссылке выше.

...