0

我需要控制一些在 html 节点中单击的 div 的转换。当这些 div 带有显示“inline-block”时，它可以正常工作，但是如果我用 css3 将它们包装在列布局中，它们就不起作用（第一列除外！）

检查这个小提琴：https ://jsfiddle.net/madelavega/hjyntsob/

第一部分，用栏目布局，只有第一栏工作：点击flip再点击“i work”，注意CSS hover样式；在第二列和第三列中它不起作用。

在第二部分中，使用 display inline-block 可以正常工作。

我需要列布局，但它似乎是一个 Chrome 错误，因为它在 Firefox 上运行良好。有人知道这件事吗？

$('.flip').click(function (evt) {
	$(evt.currentTarget).parents('.card').addClass('flipped');
});

$('.i-doesnt-work').click(function (evt) {
	$(evt.currentTarget).parents('.card').removeClass('flipped');
})
/** Column*/
.content {
  -webkit-column-count: 3;
  -webkit-column-gap:   0px;
  -moz-column-count:    3;
  -moz-column-gap:      0px;
  column-count:         3;
  column-gap:           0px;
}

/* Inline-block*/
.content-di {
  display: inline-block;
}

.card {
  display: inline-block;
  width: 150px;
  height: 100px;
  background: red;
  margin: 3px;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100% ) rotateY( -180deg );
  -moz-transform: translateX( -100% ) rotateY( -180deg );
  -o-transform: translateX( -100% ) rotateY( -180deg );
  transform: translateX( -100% ) rotateY( -180deg );
}

.front {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
 position: absolute;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: visible;
}

.back {
  webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
  position: absolute;
  color: #fff;
  height: 100%;
  top: 0px;
  width: 100%;
  background: #000;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: visible;
}

.flip {
  cursor: pointer;
}

.flipped .i-doesnt-work {
  cursor: pointer;
} 

.flipped .i-doesnt-work:hover {
  background: blue;
} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Column layout</div>
<div class="content">

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I work!</span>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I work!</span>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I doesn't work!</span>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I doesn't work!</span>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I doesn't work!</span>
    </div>
  </div>

</div>
<div>Display: inline-block</div>
<div class="content-di">
  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I work!</span>
    </div>
  </div>
  <div class="card">
    <div class="front">
      <span class="flip">Flip</span>
    </div>
    <div class="back">
      <span class="i-doesnt-work">I work too!</span>
    </div>
  </div>
    <div class="card">
      <div class="front">
        <span class="flip">Flip</span>
      </div>
      <div class="back">
        <span class="i-doesnt-work">I work too!</span>
      </div>
  </div>
      <div class="card">
      <div class="front">
        <span class="flip">Flip</span>
      </div>
      <div class="back">
        <span class="i-doesnt-work">I work too!</span>
      </div>
  </div>
      <div class="card">
      <div class="front">
        <span class="flip">Flip</span>
      </div>
      <div class="back">
        <span class="i-doesnt-work">I work too!</span>
      </div>
  </div>
</div>

4

1 回答 1

0

对于任何感兴趣的人，我们已经通过采用不同的方法解决了这个问题（这本身可能是 Chrome 中的一个错误或我们的误解，因为第一列的行为与其他列不同）。

当我们尝试单击“card”元素内的“back”元素时会出现问题，当两者都围绕 Y 轴旋转 180 度时（这意味着，我们正在尝试单击“back”元素的背面，即实际上显示在“卡片”元素的背面）。

该解决方案试图使以前的情况正常化：

  • 我们不旋转父（“card”）元素，而是只旋转“前”和“后”内部 div，遵循更自然的行为。
  • 最初，正面和背面元素处于相同位置，正面的 zIndex 大于背面的 zIndex，背面围绕 Y 轴旋转 180º（就像将 2 张纸放在一起，一张 - 正面 - 面向用户，并且另一个 - 背面 - 面向相反的方向）。
  • 当用户单击“翻转”按钮时，我们不断将“翻转”类添加到父（“卡片”）元素，但只有子元素受到影响：我们将“正面”绕 Y 轴旋转 180 度，其背面隐藏，现在将“面向屏幕背面”；我们还清除了“back”的旋转，所以它现在将“面向用户”，并增加它的zIndex。这样我们就可以保持翻转效果，并且“后退” div 现在位于顶部，面向用户并接收事件。

这是代码（小提琴可以在下面找到）：

.container {
 -webkit-column-count: 4;
  -webkit-column-gap:   10px;
  -moz-column-count:    4;
  -moz-column-gap:      10px;
  column-count:         4;
  column-gap:           10px;
}

.card, .front, .back {
  width: 100px;
  height: 100px;
}

.card {
  display: inline-block;
  position: relative;
}

.card .front,
.card .back {
  position: absolute;
  left: 0; top: 0;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.card .front {
  background: #f00;
}

.card .back {
  background: #0f0;
  transform: rotateY(180deg);
}

/** Flipped **/
.card.flipped .front {
  transform: rotateY(180deg);
}

.card.flipped .back {
  z-index: 2;
  transform: rotateY(0);
}

小提琴在行动

于 2016-04-08T12:01:02.080 回答