前段時間寫公司業務需求需要去根據后台的數據去渲染頁面元素然后對頁面元素進行翻卡片的對里面的值進行判斷的效果，其實網上也有一些demo。我根據一些demo，改進下並寫成適合於angular類似的mvc的框架渲染頁面並對進行數據操作的需求。
基本需求：后台獲取到json數據，渲染不同卡片的內容。並進行各個卡片的進行操作記錄，進行數據處理。
第一步：創建html，建立angular的app。
<body ng-controller="myCrtl">
<div ng-repeat="n in data" class="wrap">
<div id="box" class="box viewport-flip" ><!--翻轉的容器-->
<a class="list flip dd {{state[$index].isFan}}" ng-click="fan($index)"><span class="back"></span></a><!--卡片背面-->
<a class="list flip {{state[$index].isZheng}}" ng-click="fan($index)" ><span class="face">{{n}}</span></a><!--卡片正面-->
</div>
</div>
</body>
第二歩：寫出樣式表控制卡
.box { width: 355px; height: 400px; padding-top: 30px; padding-bottom: 30px; margin-left: auto; margin-right: auto; position: relative; } .wrap{ width: 355px; height: 400px; float: left; margin: 20px 50px; } .list { position: absolute; } .viewport-flip{ -webkit-perspective:1000px; } .in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 850ms; animation-timing-function: ease-out; animation-duration: 850ms; } .out { -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 500ms; animation-timing-function: ease-in; animation-duration: 500ms; } .flip { -webkit-backface-visibility: visible; -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ backface-visibility: visible; transform: translateX(0); } .flip.out { -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; transform: rotateY(-90deg) scale(.9); animation-name: flipouttoleft; } .flip.in { -webkit-animation-name: flipintoright; -webkit-animation-duration: 225ms; animation-name: flipintoright; animation-duration: 225ms; } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-90deg) scale(.9); } } @keyframes flipouttoleft { from { transform: rotateY(0); } to { transform: rotateY(-90deg) scale(.9); } } @-webkit-keyframes flipintoright { from { -webkit-transform: rotateY(90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @keyframes flipintoright { from { transform: rotateY(90deg) scale(.9); } to { transform: rotateY(0); } } .dd{ display: none; } .show{ display: block; } span{ display: inline-block; } .back{ width: 355px; height: 400px; background-color: wheat; } .face{ width: 355px; height: 400px; background-color: pink; font-size: 200px; text-align: center; line-height: 400px; }
第三歩：控制器的中js代碼動點擊不同元素，改變相應的元素的狀態
var app=angular.module('myApp',[]); app.controller('myCrtl',function($scope){ $scope.data=[1,2,3,4];//模擬后台返回的數據，不同業務需要肯定數據結構是不一樣的，我就做最基本的方便看。 $scope.state = [];//對后台返回的數據，每個不同的數據內容進行狀態綁定。 for(var i=0;i<$scope.data.length;i++){//初始化不同的數據內容進行狀態綁定。 var obj={"isFan":"out","isZheng":"","nm":0,"isClick":false}; $scope.state[i]=obj; } $scope.fan = function (index) { if(!$scope.state[index].isClick){//判斷翻轉是否開始，防止連續點擊 $scope.state[index].isClick=true; setTimeout(function(){//翻轉結束改變isClick的狀態值 $scope.state[index].isClick=false; },850); if ($scope.state[index].nm == 0) {//nm的值表示真實正面的位置，nm==0的時候代表真實正面處於當前正面 $scope.state[index].isZheng = 'out';//給背面添加向外翻轉樣式，進行動畫。 setTimeout(function () {//給正面添加向內翻轉的樣式，進行動畫。 angular.element(document.getElementsByClassName('wrap')).eq(index).find('a').eq(0).removeClass('dd').addClass('show'); $scope.state[index].isFan = 'in'; $scope.$apply(); // 重新確定正反元素 }, 500); $scope.state[index].nm = 1; } else {//nm的值表示真實正面的位置，nm==1的時候代表真實正面處於當前反面 $scope.state[index].isFan = 'out';//給背面添加向外翻轉樣式，進行動畫。 angular.element(document.getElementsByClassName('wrap')).eq(index).find('a').eq(0).removeClass('dd').addClass('show'); setTimeout(function () {//給正面添加向內翻轉的樣式，進行動畫。 $scope.state[index].isZheng = 'in'; $scope.$apply(); // 重新確定正反元素 }, 500); $scope.state[index].nm = 0; } } } });
說明下需要注意的問題
1，
.box {
width: 355px;
height: 400px;
padding-top: 30px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
}
和卡片正反兩面的高寬必須是一樣的否則會出現，翻轉到90度的時候還是，還是看的到卡片正面，非常丑陋了。
2，每次翻轉后就必須重新確定當前正反面。
3，通過angular的雙向數據綁定的功能，可以把后台給的json數據渲染成相應的卡片，並對每個卡片賦予相應的狀態，並相互不影響。
完整的demo的例子大家可以復值下來試試
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>angular實現翻卡片</title> <script src="http://zhouwei007.web3v.com/js/angular.js"></script> <style> .box { width: 355px; height: 400px; padding-top: 30px; padding-bottom: 30px; margin-left: auto; margin-right: auto; position: relative; } .wrap{ width: 355px; height: 400px; float: left; margin: 20px 50px; } .list { position: absolute; } .viewport-flip{ -webkit-perspective:1000px; } .in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 850ms; animation-timing-function: ease-out; animation-duration: 850ms; } .out { -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 500ms; animation-timing-function: ease-in; animation-duration: 500ms; } .flip { -webkit-backface-visibility: visible; -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ backface-visibility: visible; transform: translateX(0); } .flip.out { -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; transform: rotateY(-90deg) scale(.9); animation-name: flipouttoleft; } .flip.in { -webkit-animation-name: flipintoright; -webkit-animation-duration: 225ms; animation-name: flipintoright; animation-duration: 225ms; } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-90deg) scale(.9); } } @keyframes flipouttoleft { from { transform: rotateY(0); } to { transform: rotateY(-90deg) scale(.9); } } @-webkit-keyframes flipintoright { from { -webkit-transform: rotateY(90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @keyframes flipintoright { from { transform: rotateY(90deg) scale(.9); } to { transform: rotateY(0); } } .dd{ display: none; } .show{ display: block; } span{ display: inline-block; } .back{ width: 355px; height: 400px; background-color: wheat; } .face{ width: 355px; height: 400px; background-color: pink; font-size: 200px; text-align: center; line-height: 400px; } </style> </head> <body ng-controller="myCrtl"> <div ng-repeat="n in data" class="wrap"> <div id="box" class="box viewport-flip" ><!--翻轉的容器--> <a class="list flip dd {{state[$index].isFan}}" ng-click="fan($index)"><span class="back"></span></a><!--卡片背面--> <a class="list flip {{state[$index].isZheng}}" ng-click="fan($index)" ><span class="face">{{n}}</span></a><!--卡片正面--> </div> </div> </body> <script> var app=angular.module('myApp',[]); app.controller('myCrtl',function($scope){ $scope.data=[1,2,3,4];//模擬后台返回的數據，不同業務需要肯定數據結構是不一樣的，我就做最基本的方便看。 $scope.state = [];//對后台返回的數據，每個不同的數據內容進行狀態綁定。 for(var i=0;i<$scope.data.length;i++){//初始化不同的數據內容進行狀態綁定。 var obj={"isFan":"out","isZheng":"","nm":0,"isClick":false}; $scope.state[i]=obj; } $scope.fan = function (index) { if(!$scope.state[index].isClick){//判斷翻轉是否開始，防止連續點擊 $scope.state[index].isClick=true; setTimeout(function(){//翻轉結束改變isClick的狀態值 $scope.state[index].isClick=false; },850); if ($scope.state[index].nm == 0) {//nm的值表示真實正面的位置，nm==0的時候代表真實正面處於當前正面 $scope.state[index].isZheng = 'out';//給背面添加向外翻轉樣式，進行動畫。 setTimeout(function () {//給正面添加向內翻轉的樣式，進行動畫。 angular.element(document.getElementsByClassName('wrap')).eq(index).find('a').eq(0).removeClass('dd').addClass('show'); $scope.state[index].isFan = 'in'; $scope.$apply(); // 重新確定正反元素 }, 500); $scope.state[index].nm = 1; } else {//nm的值表示真實正面的位置，nm==1的時候代表真實正面處於當前反面 $scope.state[index].isFan = 'out';//給背面添加向外翻轉樣式，進行動畫。 angular.element(document.getElementsByClassName('wrap')).eq(index).find('a').eq(0).removeClass('dd').addClass('show'); setTimeout(function () {//給正面添加向內翻轉的樣式，進行動畫。 $scope.state[index].isZheng = 'in'; $scope.$apply(); // 重新確定正反元素 }, 500); $scope.state[index].nm = 0; } } } }); </script> </html>