Question

我开始学习AngularJS并且无法实现卡片翻转。当我尝试使用普通的JQuery并使用带有卡类的div上的toggleclass函数时，它可以工作。当我尝试使用下面的代码时，它却没有。我的初始卡片最初也显示背面，单击旋转时不会旋转。这是我的代码。

提前致谢。

HTML /角

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <link href='main.css' rel='stylesheet '/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app='myApp' ng-controller='MyController'>
    <div class="main-container">
        <div class="card" ng-class="{'rotateFace': !front}">
            <div class="front">
                1
            </div>
            <div class="back">
                2
            </div>
        </div>
    </div>
    <button ng-click=rotate()>Click</button>
    <script>
     var app = angular.module('myApp', []);
     app.controller('MyController', function($scope) {
         var front = true;

         $scope.rotate = function() {
             front = !front;
         }
     });
    </script>
</body>
</html>

CSS

@CHARSET "ISO-8859-1";

.main-container {
     width: 200px;
    height: 260px;
    position: relative;
    border: 1px solid #ccc;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

.card {
     width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;

}

.card div {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

Answer 1

试试这个？

$scope.front = true;

$scope.rotate = function() {
     $scope.front = !$scope.front;
}

（假设你的某个地方有一个rotateFace类 - 比如你的main.css文件？）

带角度的Cardflip

1 个答案: