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一起工作以進行頁面轉換。

有什麼想法？

Answer 1

我意識到這是很久以前，但我只是這樣做，它採取零JavaScript。關鍵是ng級。這是一個JSFIDDLE。

的關鍵是這一行

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

它將分配類「翻轉」卡當$ scope.isFlipped是真實的。這裏是我放在一起的一個小NFL閃存卡遊戲樂趣。看看源代碼（這不是非常漂亮），如果你正在做這樣的事情，應該會很有幫助。

NFL Flash Cards