1

CSSトランジションを使用してdivを移動しますが、これはうまく機能しますが、Androidでは機能しません。

div が position:fixed の場合、何も起こりません

元のdiv:

header {
    position: fixed;
    display:block;
    top:0;
    left:0;
    height:50px;
    width:100%;
    z-index:4;
    float:left;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
}

移動するために追加するクラス：

.show-left-menu {
    transform: translate(79%,0);
    -ms-transform: translate(79%,0);
    -webkit-transform: translate(79%,0);
}

position:relative に変更すると機能しますが、スティッキー ヘッダーなので修正する必要があります

4

1 に答える 1

1

Android にはバグがあり、4.0 でも 4.1+ まで修正されません。

TL;DR:

これは Android では動作しません:

<div class="side-menu"></div>

.side-menu {
  position: fixed;
  left: -70px;
}
.side-menu.show {
  transform: translateX(70px);
}

これは機能し、基本的な通常の CSS であるため、他のブラウザーにも影響しません。

<div class="side-menu-fixer">
  <div class="side-menu"></div>
</div>

.side-menu-fixer {
  position: fixed;
}
.side-menu {
  position: position;
  left: -70px;
}
.side-menu.show {
  transform: translateX(70px);
}

説明:transform Android 4.0 では、要素にs CSS を 使用できませんposition:fixed。これはバグです。これを回避するにはrpsep2、固定位置要素を別の div にラップしてposition:fixed、元の要素の位置タイプを変更するというアイデアが機能しposition:absoluteます。

解決策はrpsep2からのものですが、これを答えとして追加したかったのは、Androidでこれを機能させるのに長い時間を費やしたため、解決策が得られてとてもうれしいからです。ありがとう！

于 2014-12-18T06:45:54.453 に答える