我有一个简单的 div，它会在单击文本时翻转。我正在使用 Angular，但是一旦 div 翻转，再次点击它就不会恢复到正常状态。
Fiddle here
HTML
<body ng-app>
<div>
<div id="content_wrapper">
<div id="flip_wrapper" ng-init="show_case='employee'" class="transition_long {{show_case == employer}}">
<div id="employee_wrapper" class="flip_case">
<div ng-click="show_case = employer" class="clickme">click to flip</div>
</div>
<div id="employer_wrapper" class="flip_case">
<div ng-click="show_case = employee" class="clickme">back to where we were</div>
</div>
</div>
</div>
</div>
</body>
CSS
#content_wrapper {
width: 100%;
height: 100%;
position: fixed;
perspective: 2000;
}
#flip_wrapper {
transform-style: preserve-3d;
min-height: 100%;
width: 100%;
position: relative;
}
#flip_wrapper.false {
transform: rotateY(0deg);
}
#flip_wrapper.true {
transform: rotateY(-180deg);
}
.flip_case {
height: 100%;
width: 100%;
position: absolute;
backface-visibility: hidden;
}
.flip_case#employee_wrapper {
transform: rotateY(0deg);
}
.flip_case#employer_wrapper {
transform: rotateY(180deg);
}
最佳答案
我创建了一个 fiddle ，通过将逻辑移动到 Controller 中使其工作 http://jsfiddle.net/7zwuw311/1/
<body ng-app="app">
<div ng-controller="Ctrl">
<div id="content_wrapper">
<div id="flip_wrapper" class="transition_long {{show_case}}">
<div id="employee_wrapper" class="flip_case">
<div ng-click="toggleShowCase()" class="clickme">click to flip</div>
</div>
<div id="employer_wrapper" class="flip_case">
<div ng-click="toggleShowCase()" class="clickme">back to where we were</div>
</div>
</div>
</div>
</div>
</body>
angular.module('app', [])
angular.module('app')
.controller('Ctrl', function Ctrl( $scope) {
$scope.show_case = false;
$scope.toggleShowCase = function(){
$scope.show_case = !$scope.show_case;
}
});
关于html - 无法使 Angular 与 CSS 3D 一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27432774/