javascript AngularJS 动画卡片翻转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21610615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS animation card flip
提问by Jonovono
I am trying to use the new AngularJS way of doing animations between page transitions and would like to incorporate a card flip (like http://jsfiddle.net/nicooprat/GDdtS/)
我正在尝试使用新的 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;
}
I am just a bit unsure how to update that code to make it work with AngularJS for a page transition.
我只是有点不确定如何更新该代码以使其与 AngularJS 一起用于页面转换。
Any thoughts?
有什么想法吗？
回答by Zack Argyle
I realize this was a long time ago, but I was just doing this, and it took zero javascript. The key is ng-class. Here is a JSFIDDLE.
我意识到这是很久以前的事了，但我只是在做这件事，而且它使用了零 javascript。关键是 ng-class。这是一个JSFIDDLE。
The key is this line
关键是这条线
<div class="card" ng-class="{'flipped':isFlipped}" ng-click="isFlipped=!isFlipped">
It will assign the class 'flipped' to the card when $scope.isFlipped is true. Here is a little NFL flash cards game I put together for fun. Check out the source code (which isn't super pretty), it should be helpful if you are doing something like this.
当 $scope.isFlipped 为真时，它会将“翻转”类分配给卡片。这是我为了好玩而组合在一起的一个小 NFL 闪卡游戏。查看源代码（它不是非常漂亮），如果您正在做这样的事情，它应该会有所帮助。
回答by J Woodchuck
Hereis an alternate solution where it's more clear from the html what's happening. Specifically, the flip mechanism is in angularjs rather than buried in css magic. Perhaps easier to follow for anyone who's not a css expert:
这是一个替代解决方案，从 html 中可以更清楚地了解发生了什么。具体来说，翻转机制是在 angularjs 中，而不是埋在 css 魔法中。对于不是 css 专家的人来说，也许更容易理解：
<div class="card" ng-click="isFlipped=!isFlipped">
<div class="face front" ng-class="{'flipped':isFlipped}">
Front
</div>
<div class="face back" ng-class="{'flipped':!isFlipped}">
Back
</div>
</div>
