AngularJS动画卡片翻转

Question

我正在尝试使用新的AngularJS方式在页面转换之间进行动画，并希望加入卡片翻转效果（例如http://jsfiddle.net/nicooprat/GDdtS/）

body {
 background: #ccc;   
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
 width: 100%;
 height: 100%;
 position: absolute;
 -webkit-backface-visibility: hidden ;
 z-index: 2;
 font-family: Georgia;
 font-size: 3em;
 text-align: center;
 line-height: 200px;
}
.flip .card .front {
 position: absolute;
 z-index: 1;
 background: black;
 color: white;
 cursor: pointer;
}
.flip .card .back {
 -webkit-transform: rotatex(-180deg);
  background: blue;
  background: white;
  color: black;
  cursor: pointer;
}

我不太确定如何更新那段代码，以使其能够与AngularJS一起使用实现页面转换。

您有什么想法吗？

- Jonovono

Answer 1

我知道这是很久以前的事情了，但我只是做了一下，而且它不需要任何JavaScript代码。关键在于 ng-class。这里有一个JSFIDDLE。

关键在于这行代码。

<div class="card" ng-class="{'flipped':isFlipped}" ng-click="isFlipped=!isFlipped"> 

当$scope.isFlipped为true时，它会将类“flipped”分配给卡片。这是我为了好玩而制作的一个小NFL闪卡游戏。查看源代码（不是特别漂亮），如果您正在做类似的事情，它应该很有帮助。 NFL 闪卡

- Zack Argyle

---

非常有帮助。谢谢，Zack。 - mrgnw

这太棒了。喜欢它的简洁。 - Banjo Drill

这很好...但在Firefox上似乎不起作用...如何让JSfiddle示例在Firefox上运行？ - whippits

唯一对我起作用的解决方案。简单易懂，点赞！ - HarshaXsoad

Answer 2

这里提供了另一种解决方案，其中从HTML更清晰地了解发生了什么。具体而言，翻转机制在AngularJS中而不是隐藏在CSS魔法中。对于任何不是CSS专家的人来说，可能更容易理解：

<div class="card" ng-click="isFlipped=!isFlipped">
    <div class="face front" ng-class="{'flipped':isFlipped}">
        Front
    </div> 
    <div class="face back" ng-class="{'flipped':!isFlipped}">
        Back
    </div> 
</div>

- Woodchuck