html - 使用 :target 从窗口右侧的 CSS3 过渡

Question

我面临两个问题:

这是要引用的 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;
}

Answer 1

这似乎是一个浏览器问题，似乎在一些延迟和处理宽度的情况下工作正常，作为一种解决方法，您可以尝试通过过渡更改左侧、边框宽度和宽度，下面是仅在 chrome 中测试的工作案例(refer to the updated jsfiddle sample) :

#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;
}