2

我面临两个问题：

这是要参考的 jsFiddle：http: //jsfiddle.net/2D7Ss/1/

  1. 在当前的 jsFiddle 中，当问候框向左滑动时，它会完全立即出现，而不是增量出现，然后再向左滑动。右边的幻灯片工作正常。

  2. 如果我将问候 div 的宽度设置为 100%，它不会向左滑动。这个问题似乎与上述问题有关，因为它在滑动之前完全出现在面板中。但在这种情况下，宽度为 100%，因此不会发生滑动。

最终，当其他页面或内容面板从右侧滑动时，我正在尝试构建一个页面。

这是HTML：

<a href="#hello">Hello</a> | <a href="#goodbye">Goodbye</a>
<div id="content">
    <div id="hello">Hello</div>
</div>
<div id="content">
    <div id="goodbye">Goodbye</div>
</div>

这是CSS：

body {
  margin-left: 5px;   
}

#content {
  background: #ccc;
  width: 100%;
  height: 102px;
  position: relative;
  overflow: hidden;
}

#content div {
  position: absolute;
  background: lightblue;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  left: 100%;
  -moz-transition: left 1s ease;
  -webkit-transition: left 1s ease;
}

#content > div:target {
  left: 0;
}
4

1 回答 1

4

这似乎是一个浏览器问题，并且在一些延迟和处理宽度的情况下似乎可以正常工作，作为一种解决方法，您可以尝试通过转换更改左侧、边框宽度和宽度，下面是仅在 chrome 中测试的工作案例（请参阅更新的 jsfiddle样品）：

#content div {
    position: absolute;
    overflow: hidden;
    background: lightblue;
    width: 0px;
    height: 100px;
    border: 1px solid gray;
    border-width: 0px;
    left: 100%;
    -moz-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s;
    -webkit-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s;
}
#content > div:target {
    left: 0;
    width: 100%;
    border: 1px solid gray;
    -moz-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
    -webkit-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
}
于 2013-01-27T07:39:48.727 回答