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 回答