Question

我的HTML 5应用程序出了问题。我想生成一个带左/右过渡的滑动菜单（响应式），其中第一个面板在右侧始终可见100px。

但是有一个问题。首先<div>传递原始<div> ...

HTML：

<div id="myContainer">
    <div class="animate1 animate1-nomove">
        <section class="myPanel panel-padding">new new new new new</section>
    </div>
    <div class="animate2 animate2-nomove">
        <section class="myPanel panel-padding" id="scrolling">original</section>
    </div>
</div>

CSS：

div#myContainer {
    position: absolute;
    top: 60px; right: 0; bottom: 60px; left: 0;
    /* need for sliding menu */
    overflow: hidden;
    border: 1px solid;
}

div.animate1 {
    height: 100%;
    width: 100%;
    background-color: #c00;
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    -ms-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
    position: absolute;
}

div.animate2 {
    height: 100%;
    width: 100%;
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    -ms-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
    position: absolute;
}


/* no move */
.animate1-nomove {left: -100%;}
.animate2-nomove {left: 0px;}

/* move */
.animate1-move {left: 0px; margin-right: 100px;}
.animate2-move {left: 100%; margin-left: -100px;}

我的小提琴：http://jsfiddle.net/nKtC6/714/

Answer 1

这是你想要做的吗？

http://jsfiddle.net/prollygeek/nKtC6/716/

div.animate1 {
  height: 100%;
  width: 100px;
  background-color: #c00;
  -webkit-transition: 2s ease-in-out;
  -moz-transition: 2s ease-in-out;
  -o-transition: 2s ease-in-out;
  -ms-transition: 2s ease-in-out;
  transition: 2s ease-in-out;
  position: absolute;
}

Div在左/右转换中通过其他div

1 个答案: