Question

我正在试图将卡片面朝上翻转然后逐渐消失。我这样做是通过添加一个类＆＃39;翻转＆＃39;点击，第二个消失＆＃39;超过2秒后。但是，一旦“消失”，等级被添加，卡片面朝下翻转。我不明白为什么，因为＆＃39;翻转＆＃39;类仍然适用。

这是我的标记：

(.. (SomeObject/newBuilder)
    (withId 1)
    (withFooEnabled true)
    (build))

CSS（标记为翻转和消失的类）

<div class="grid-space">
    <div class="card">
      <div class="front-face">
        <img src="https://res.cloudinary.com/lwcqviihu/image/upload/v1512898858/Animals/Sloth_svg.svg"/>
        <p>sloth</p>
      </div>
      <div class="back-face"></div>
    </div>
</div>

最后，javascript：

    body {
      background: #333;
    }

    .grid-space {
      perspective: 1000;
      width: 200px;
      margin: auto;
    }

    .grid-space:hover {
      transform: scale(1.02);
      transition: 0.3s ease-in-out;
    } 

    .card {
      position: relative;
      padding-bottom: 100%;
      display: flex;
      border-radius: 1vw;
      transition: transform 0.4s ease-in-out, opacity 2s ease-in-out;
        transform-style: preserve-3d;
      cursor: pointer; 
    }

    .card p {
      color: inherit;
    }

/*****These are the classes applied to do the animation***********/

    .flipped {
      transform: rotateY(180deg);
    }

    .vanish {
      opacity: 0;
    }

/*****END**********************************************************/

    .front-face, .back-face {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 1vw;
      text-align: center;
      box-sizing: border-box;
    }

    .front-face {
      transform: rotateY(180deg);
      color: #EDCB7A;
      background: #487360;
      border-style: solid;
      border-width: 2px;
    }

    .back-face {
      /* background: #C7C6C4;
      border: 1px solid #EBD787; */
      background: #3A295C;
      border: 1px #EBD787 solid;
      z-index: 10;
    }

    .front-face > p {
      font-size: 3vmin;
      margin: 0;
      position: absolute;
      bottom: 5%;
      width: 100%;
      text-align: center;
    }

    .front-face > img {
      width: 90%;
      margin-top: 5%;
    }

你可以看到整个事情＆＃39;工作＆＃39;在这里：https://codepen.io/timsig/pen/MVavXv

非常感谢您的帮助。

Answer 1

在向父母施加不透明度时，隐藏显露面部似乎有些奇怪。

我真的不知道为什么会发生这种情况（如果有人有线索，我真的非常想知道），但另一种方法是修改面孔而不是卡片本身。你申请.vanish课程

.vanish > .back-face{
  visibility:hidden;
}

.vanish > .front-face{
  opacity:0
}

.front-face{
  transition:opacity 2s ease-in-out;
}

当然，取出将不透明度0应用于.card

的规则

/*.vanish {
  opacity: 0;
}*/

Answer 2

我想我知道为什么会这样。由于.card将.vanish的不透明度设置为0时，由于在.card本身上设置了不透明度样式，因此设置了其默认状态的不透明度。
我通过将不透明度样式移动到.front-face来修复它，因为那是你要淡出的一面。

.card {
  transition: transform 0.4s ease-in-out;
}
.vanish .front-face {
  opacity: 0;
}
.front-face {
  transition: opacity 2s ease-in-out;
}

CSS类冲突

2 个答案: