Блог

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

Есть идеи,

Изумительный

Взгляните на http://css3.bradshawenterprises.com/sliding /.

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