html - 使用 CSS 单击其他卡片时返回 Flipkart

Question

我正在尝试创建一个翻转卡片功能，该功能在桌面 View 中悬停时起作用，而在移动 View 中单击时起作用。我能够使用 checkbox 和完全使用 CSS 来实现。

这是代码片段:

.flip-card {
    width: 150px;
    height: 180px;
    margin: 1em;
    perspective: 1500px;
}
.flip-card .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.more {
    display: none;
}
.more:checked ~ .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    border-radius: 6px;
}
.inner {
    height: 100%;
    display: grid;
    padding: 1.5em;
}
.flip-card-front {
    background-color: #2980b9;
}

.flip-card-back {
    transform: rotateY(180deg);
    background-color: #fff;
    border: 2px solid #f0f0f0;
}

@media screen and (min-width: 900px){
.flip-card-inner:hover {
    transform: rotateY(180deg);
  }
}

<div class="flip-card col-6">
    <input type="checkbox" id="card1" class="more" aria-hidden="true">
    <div class="flip-card-inner">
      <label for="card1"  aria-hidden="true">
      <div class="flip-card-front" style="background-color: rgba(96,132,38,0.4); box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">

      
        <div class="font-weight-bold flip-card-front-book-title ml-2 mb-2">Outliers</div>

        <div class="font-weight-bold flip-card-front-book-author ml-2" style="color: #A2671A;"> <span
            class="text-muted">By</span> Malcolm Gladwell</div>
      
      </div>
    </label>
    <label for="card1"  aria-hidden="true">
      <div class="flip-card-back" style="box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">
    
        <div>
          <h5 >Added by</h5>
          <strong >Jitesh</strong>
        </div>
      </div>
    </label>
    </div>
</div>

<div class="flip-card col-6 ">
    <input type="checkbox" id="card2" class="more" aria-hidden="true">
    <div class="flip-card-inner">
      <label for="card2"  aria-hidden="true">
      <div class="flip-card-front" style="background-color: rgba(96,132,38,0.4); box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">

      
        <div class="font-weight-bold flip-card-front-book-title ml-2 mb-2">Shoe Dog</div>

        <div class="font-weight-bold flip-card-front-book-author ml-2" style="color: #A2671A;"> <span
            class="text-muted">By</span> Phil Knight</div>
      
      </div>
    </label>
    <label for="card2"  aria-hidden="true">
      <div class="flip-card-back" style="box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">
    
        <div>
          <h5 >Added by</h5>
          <strong >Ishant</strong>
        </div>
      </div>
    </label>
    </div>
</div>

我正在显示多张卡片，并在移动 View 上使用它们的唯一 ID 进行翻转事件。现在，我需要添加一项功能，在单击任何其他卡片或单击其他任何地方后将卡片翻转回来。 (仅适用于移动 View )。目前，我必须手动单击每张卡片才能将其翻转回原始状态。

如果可能，我正在寻找基于 CSS 的解决方案。

附言如果无法使用纯 CSS，请提供一个使用 jquery 的可行解决方案，因为我是新手。

Answer 1

这里有一个纯 CSS 解决方案(有一个问题，我将在下面解释):

.flip-card {
  width: 150px;
  height: 180px;
  margin: 1em;
  perspective: 1500px;
  display: inline-block;
}

#no-card-open:not(:checked) ~ .flip-card {
  position: relative;
  z-index: 2;
}

.flip-card .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}

input[name="card-control"] {
  display: none;
}

.more:checked + .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 6px;
}

.inner {
  height: 100%;
  display: grid;
  padding: 1.5em;
}

.flip-card-front {
  background-color: #2980b9;
}

.flip-card-back {
  transform: rotateY(180deg);
  background-color: #fff;
  border: 2px solid #f0f0f0;
}

@media screen and (min-width: 900px) {
  .flip-card-inner:hover {
    transform: rotateY(180deg);
  }
}

#screen {
  display: fixed;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

#no-card-open:checked ~ #screen {
  display: none;
}

<input type="radio" id="no-card-open" name="card-control" checked />
<label id="screen" for="no-card-open"></label>

<div class="flip-card col-6">
  <input type="radio" id="card1-open" name="card-control" class="more" />
  <div class="flip-card-inner">
    <label for="card1-open" aria-hidden="true">
      <div class="flip-card-front" style="background-color: rgba(96,132,38,0.4); box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">      
        <div class="font-weight-bold flip-card-front-book-title ml-2 mb-2">Outliers</div>
        <div class="font-weight-bold flip-card-front-book-author ml-2" style="color: #A2671A;"> <span
            class="text-muted">By</span> Malcolm Gladwell</div>
      </div>
    </label>
    <label for="no-card-open" aria-hidden="true">
      <div class="flip-card-back" style="box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">
    
        <div>
          <h5 >Added by</h5>
          <strong >Jitesh</strong>
        </div>
      </div>
    </label>
  </div>
</div>

<div class="flip-card col-6 ">
  <input type="radio" id="card2-open" name="card-control" class="more" />
  <div class="flip-card-inner">
    <label for="card2-open" aria-hidden="true">
      <div class="flip-card-front" style="background-color: rgba(96,132,38,0.4); box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">

      
        <div class="font-weight-bold flip-card-front-book-title ml-2 mb-2">Shoe Dog</div>

        <div class="font-weight-bold flip-card-front-book-author ml-2" style="color: #A2671A;"> <span
            class="text-muted">By</span> Phil Knight</div>
      
      </div>
    </label>
    <label for="no-card-open" aria-hidden="true">
      <div class="flip-card-back" style="box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">
    
        <div>
          <h5 >Added by</h5>
          <strong >Ishant</strong>
        </div>
      </div>
    </label>
  </div>
</div>


<div class="flip-card col-6 ">
  <input type="radio" id="card3-open" name="card-control" class="more" />
  <div class="flip-card-inner">
    <label for="card3-open" aria-hidden="true">
      <div class="flip-card-front" style="background-color: rgba(96,132,38,0.4); box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">

      
        <div class="font-weight-bold flip-card-front-book-title ml-2 mb-2">Incognito</div>

        <div class="font-weight-bold flip-card-front-book-author ml-2" style="color: #A2671A;"> <span
            class="text-muted">By</span> David Eagleman</div>
      
      </div>
    </label>
    <label for="no-card-open" aria-hidden="true">
      <div class="flip-card-back" style="box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4),
    -3px -3px 4px rgba(255, 255, 255, 1);">
    
        <div>
          <h5 >Added by</h5>
          <strong >Alvaro</strong>
        </div>
      </div>
    </label>
  </div>
</div>

此解决方案背后的想法:使用单选按钮代替复选框。

一组具有相同 name 的单选按钮一次最多只能有一个事件的单选按钮。而且您一次只想翻一本书/一张卡片。基于此，单选按钮似乎是比复选框更自然的解决方案。

因此，第 1 步:用单选按钮替换复选框。

现在我们找到了第一个问题:这样一次只能翻一张牌。但如果我点击翻转的卡片，它应该回到原来的位置……而现在，它没有。您可以通过添加一个新的单选按钮来解决这个问题，该按钮将指示没有卡片被翻转。

卡在正常状态下的标签会指向该卡的radio。翻转卡片的标签将指向“没有卡片被翻转”单选框，而不是指向卡片单选框。

第2步:添加一个radio来处理no-card-flipped状态。

还有最后一个问题。您需要单击卡片才能将其翻转回正常状态。当您在外部单击时，没有任何反应，即使您希望翻转的卡片进入正常状态，翻转的卡片也会保持翻转状态。

为避免这种情况，您可以创建一个视觉上隐藏的 label ，它会指向 no-card-flipped 状态。这个新标签将覆盖整个视口(viewport)并位于卡片之外的所有内容之上(在示例中，我为屏幕标签做了 z-index:1 和 z-index:2 用于卡片)。 屏幕标签仅在翻转卡片时可见。这样一来，无论您在屏幕上点击什么地方(卡片上除外)，它都会将翻转的卡片返回到正常位置并隐藏屏幕。

第 3 步:添加一个“隐藏”屏幕，使所有卡片返回正常位置。

这就是问题所在:因为当卡片打开时屏幕覆盖了整个视口(viewport)，您可能会看到一些奇怪的行为，例如，您单击链接或按钮，但第一次没有任何反应，你必须点击它两次。这是因为第一次点击是隐藏屏幕。

这就是带有陷阱的纯 CSS 解决方案 :)

---

注意:虽然可能有 CSS 选项，但我不建议使用它。上面的解决方案是特定于问题中给出的示例的，在更复杂的环境中可能会失败。

此外，整个系统的复杂性也大大增加。卡片越多，单选按钮就越多。使用 JavaScript 管理状态会更容易、更快速(而且它可能在可访问性方面也更好)。