卡片翻轉效果（css3+angularjs）

時間 2019-11-12

標籤卡片翻轉效果 css3+angularjs css angularjs 欄目 CSS 简体版

原文原文鏈接

前段時間寫公司業務需求須要去根據後臺的數據去渲染頁面元素而後對頁面元素進行翻卡片的對裏面的值進行判斷的效果，其實網上也有一些demo。我根據一些demo，改進下並寫成適合於angular相似的mvc的框架渲染頁面並對進行數據操做的需求。html

基本需求：後臺獲取到json數據，渲染不一樣卡片的內容。並進行各個卡片的進行操做記錄，進行數據處理。web

第一步：建立html，創建angular的app。json

<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代碼動點擊不一樣元素，改變相應的元素的狀態mvc

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

        }
    });

說明下須要注意的問題app

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。