第一次使用后，toggleClass（）不起作用

Question

请参阅我的codepen：http://codepen.io/Chiz/pen/XmEvdm

单击红色框。它旋转，现在出现蓝框。 单击蓝色框。它不会切换回红色框。

我很确定toggleClass部分的JQuery代码是正确的，为什么它不起作用？

韩国社交协会！

var vCard = $("#card");

vCard.on("click", function()
{
  $(this).toggleClass("flipped");
});

@mixin prefix($prop, $val)
{
  -webkit-#{$prop}: #{$val};
  -moz-#{$prop}: #{$val};
  -ms-#{$prop}: #{$val};
  #{$prop}: #{$val};
}

.container
{
  width:200px;
  height:260px;
  position:relative;
  perspective:800px;
}

#card
{
  width:100%;
  height:100%;
  position:absolute;
  @include prefix(transform-style,preserve-3d);
  @include prefix(transition, transform 1s);
  @include prefix(backface-visibility, hidden);
  @include prefix(transform-style, preserve-3d);
}

 #card.flipped
{
  @include prefix(transform, rotateY(180deg));
}

#card figure
{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  @include prefix(backface-visibility, hidden);
}

.front
{
  background-color:lighten(red,30%);
}
.back
{
  background-color:lighten(blue,30%);
  @include prefix(transform, rotateY(180deg));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 1

试试这个： - http://codepen.io/anon/pen/RWybrd

从@include prefix(backface-visibility, hidden);

中删除#card

Answer 2

事件在绑定到section时触发。

$('section').on("click", function()
{
 console.log('clicked'); $(this).children('div').toggleClass("flipped");
});

所以@jumpingcode评论说，它与你的css相关，使得div改变位置。

Answer 3

我做了以下工作，它对我有用。

我从.card.flipped -webkit-backface-visibility: hidden;和backface-visibility:hidden;删除了我用-moz-backface-visibility: hidden;替换了那些。