AngularJS动画卡片翻转

Posted 2023-03-06

【中文标题】AngularJS动画卡片翻转

【英文标题】：AngularJS animation card flip

【发布时间】：2014-03-03 20:29:04

【问题描述】：

我正在尝试使用新的 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 一起用于页面转换。

有什么想法吗？

【参考方案1】：

我意识到这是很久以前的事了，但我只是这样做，它只需要零 javascript。关键是ng级。这是JSFIDDLE。

关键是这一行

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

当 $scope.isFlipped 为真时，它会将类 'flipped' 分配给卡片。这是我为了好玩而放在一起的一个小 NFL 闪存卡游戏。查看源代码（不是超级漂亮），如果您正在做这样的事情，它应该会有所帮助。

NFL Flash Cards

【讨论】：

非常有帮助。谢谢，扎克。

这太棒了。喜欢简单。

这很好......但这似乎在 firefox 中不起作用.. 如何让 JSfiddle 示例在 firefox 上工作？

唯一对我有用的解决方案。 +1 为简单起见。

【参考方案2】：

Here 是另一种解决方案，从 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>