ページ遷移間でアニメーションを実行する新しい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;
}
そのコードを更新して、ページ遷移のためにAngularJSで機能するようにする方法が少しわかりません。
何かご意見は?
これはずっと前のことだと思いますが、私はこれをやっていただけで、JavaScriptは必要ありませんでした。キーはng-classです。これが [〜#〜] jsfiddle [〜#〜] です。
重要なのはこの行です
<div class="card" ng-class="{'flipped':isFlipped}" ng-click="isFlipped=!isFlipped">
$ scope.isFlippedがtrueの場合、クラス 'flipped'がカードに割り当てられます。これは私が楽しみのためにまとめた小さなNFLフラッシュカードゲームです。ソースコードをチェックしてください(これはあまりきれいではありません)。このようなことをしている場合に役立つはずです。
ここ は、HTMLから何が起こっているのかがより明確になる代替ソリューションです。具体的には、フリップメカニズムはcssマジックに埋め込まれているのではなく、angularjsにあります。おそらく、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>