Подтвердить что ты не робот

Мультяшная карта AngularJS flip

Я пытаюсь использовать новый способ 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 для перехода на страницу.

Любые мысли?

4b9b3361

Ответ 1

Я понимаю, что это было давно, но я просто делал это, и это заняло нулевой javascript. Ключ - это ng-класс. Вот JSFIDDLE.

Ключ этой строки

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

Он назначит класс 'flipped' на карту, когда $scope.isFlipped является true. Вот небольшая флеш-карта NFL, которую я собрал для удовольствия. Проверьте исходный код (что не очень красиво), это должно быть полезно, если вы делаете что-то вроде этого.

Флэш-карты NFL