AngularJS animation card flip

Question

I am trying to use the new AngularJS way of doing animations between page transitions and would like to incorporate a card flip (like 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;
}

I am just a bit unsure how to update that code to make it work with AngularJS for a page transition.

Any thoughts?

Answer 1

I realize this was a long time ago, but I was just doing this, and it took zero javascript. The key is ng-class. Here is a JSFIDDLE.

The key is this line

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

It will assign the class 'flipped' to the card when $scope.isFlipped is true. Here is a little NFL flash cards game I put together for fun. Check out the source code (which isn't super pretty), it should be helpful if you are doing something like this.

NFL Flash Cards

Answer 2

Here is an alternate solution where it's more clear from the html what's happening. Specifically, the flip mechanism is in angularjs rather than buried in css magic. Perhaps easier to follow for anyone who's not a css expert:

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