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一起用于页面转换。

有什么想法吗？

Answer 1

我意识到这是很久以前的事了，但我只是这样做，并且它花了零点javascript。关键是ng-class。这是JSFIDDLE。

关键是这一行

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

它将分配课程＆＃39;翻转＆＃39; $ scope.isFlipped为true时卡片。这是一个非常有趣的NFL闪存卡游戏。查看源代码（这不是非常漂亮），如果你做这样的事情应该会有所帮助。

NFL Flash Cards

Answer 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>

AngularJS动画卡翻盖

2 个答案: