2

私は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 に答える