为什么我的 CSS 规则未应用于翻转图像？

Question

我有一个具有双面 HTML 元素的应用程序。 当用户单击按钮时，我想“翻转”元素。 我一直在努力让它像这里所示的那样工作。 该示例包括以下 HTML、CSS 和 JavaScript。

HTML

<div id="myApp">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div :class="{ 'flip-card-front':true, 'flipped':!isFlipped }">Side A</div>
      <div :class="{ 'flip-card-back':true, 'flipped':isFlipped }">Side B</div>
    </div>
  </div>

  <button @click="onButtonClick">Flip</button>
</div>

CSS

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotateY(180deg);
  
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

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

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

JavaScript

const MyApp = {
  data() {
    return {
      isFlipped: false
    }
  },
  
  methods: {
    onButtonClick() {
      this.isFlipped = true;
    }
  }
}

Vue.createApp(MyApp).mount('#myApp');

似乎没有任何错误。 它的行为不像我预期的那样。 一切看起来都是正确的。 当有人点击按钮时，如何让卡片翻转？

更新这个例子清除了它。

Answer 1

您的 class 正在按预期应用，但您有 CSS 特异性问题。

像这样增加特异性：

.flip-card-front.flipped {
  transform: rotateY(180deg);
}

Answer 2

尝试替换下面的代码。

this.isFlipped = true;

至

this.isFlipped = !this.isFlipped;