1

素敵な変換トランジションを使用して、特定のリンクがクリックされたときに入力フィールドを表示しようとしています。これは一種のロールオーバー効果で、iOS 6 の通知アニメーション スタイルに似ています。

ここにデモがあります: http://codepen.io/anon/pen/yBzJL

基本的に、入力フィールドをリンクの上に配置して最初に回転させるだけなので、画面には表示されません。次に、リンクがクリックされると、親を反対方向に回転させて、両方の子 (リンクと入力) が回転し、入力フィールドのみが表示されるようにします。

これは問題なく機能しますが、問題は、遷移後に入力フィールドをクリックできないことです。これを解決する理由や方法がわかりません。

重要なコード部分は次のとおりです。

HTML

<div>
  <span class="rollover">
    <span class="rollover__front">
      <a href="#">Add a new article </a>
    </span>
    <span class="rollover__bottom">
      <input type="text" placeholder="Article number...">
    </span>
  </span>
</div>

CSS

.rollover,
.rollover__front,
.rollover__bottom
{
  display:inline-block;
  -webkit-backface-visibility:hidden;
}

.rollover
{
  position:relative;
  -webkit-transform-style:preserve-3d;
  -webkit-transform-origin-z:-16px;
  -webkit-transition:-webkit-transform .3s ease-in-out;
}

.rollover--is-rolled
{
  -webkit-transform:rotateX(90deg);
}

.rollover__bottom
{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  -webkit-transform-origin-z:-16px;
  -webkit-transform:rotateX(-90deg);
}

どんな助けでも大歓迎です。

ありがとう。ゾニック

4

1 に答える 1

1

これは少し前のことですが、まだこの問題が発生している場合に備えて、同様の問題に対処しました. その理由は、親要素に Z 幅がないため、要素をクリックしているとは見なされないためです。180 度回転すると、親要素の背面がそこにあり、クリックが拾われます。アニメーションを機能させるには、下部を -90 度回転させて開始し、クリックで上部を 90 度、下部を 0 度に回転させる必要があります。そうすれば、親は常に表示されます。

CSS

.rollover,
.rollover__front,
.rollover__bottom
{
    -webkit-backface-visibility:hidden;
}

.rollover__front,
.rollover__bottom{
    -webkit-transition:-webkit-transform .3s ease-in-out;
}

.rollover
{
  height: 19px;
    position:relative;
    -webkit-transform-style:preserve-3d;
    -webkit-transform-origin-z:0px;
}

.rollover--is-rolled .rollover__bottom{
 -webkit-transform:rotateX(0deg);
}

.rollover--is-rolled .rollover__front{
  -webkit-transform:rotateX(90deg);
}

.rollover__front{
  position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    -webkit-transform-origin-z: -10px;
}

.rollover__bottom
{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
-webkit-transform:rotateX(-90deg);
-webkit-transform-origin-z: -30px;
}

HTML

<div>
  <div class="rollover">
    <div class="rollover__front">
      <a href="#">Add a new article </a>
    </div>
    <div class="rollover__bottom">
      <input type="text" placeholder="Article number...">
    </div>
  </div>
</div>

そして、この作業へのリンク: http://codepen.io/anon/pen/wqBsp

于 2014-02-09T12:43:01.747 に答える